Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS] Flexbox(フレックスボックス)で横並べ、他

Flexbox

バナーなどを横に並べたい時、float:leftの回り込みを使っていませんでしたか?それも正解なのですが、Flexboxなら、もっと簡単に実装できるのでご紹介します。うん、楽なはず。

INDEX

共通 html

背景があって、白い部分がcontainerだとします。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

※ 2021年現在、基本のdisplay: flex;に、IE11様の display: -ms-flexbox; を追加するだけで事足りる様です。

基本的な横並び

flexbox
ul {
display: -ms-flexbox;
display: flex;
}

横並び中央寄せ

flexbox
ul {
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}

均等に横並び(左右の余白あり)

display: flex
ul {
display: -ms-flexbox;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
}

均等に横並び(左右の余白なし)

flexbox
ul {
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
} 

レスポンシブで作る時って、画像サイズを大きくしていたりしますよね?多分、画像サイズの問題だと思うのですが、これだと余白無しのパツパツ状態になってしまいます。画像サイズが表示させたいサイズよりも大きい場合は、下記の方法を。

ul{display: flex;}
ul li{padding-right: 25px;}
ul li:last-child{padding-right: 0;}

右にpaddingを付けて、3の右だけpaddingを付けない

並び順を変える

display: flex
ul {
display: -ms-flexbox;
display: flex;
}
ul li:nth-of-type(3) {
-webkit-order: -1;
order: -1;
} 

nth-of-typeについては、[CSS] 便利!擬似クラスで〇番目を指定する でもご紹介しています。

高さいろいろ

display:flex;は、中の箱(li)の高さを自動的に揃えてくれますが、揃えたくない場合のアレコレ

ulにalign-itemsを書き足すと、コンテンツの内容量に応じて、箱(li)はバラバラの高さになります。あとは、どこで揃えるか。

  • align-items:flex-start;  上揃え
  • align-items:flex-end;   下揃え
  • align-items:flex-center; 中央揃え

Flexboxの折り返し

簡単にボックスを横並びにできるFlexboxですが、float異なり「溢れたら折り返す」とはならないので、親要素にflex-wrapを追加します。

display: flex;
flex-wrap: wrap;

余白の設定

折り返しにはなりましたが、余白の問題が生じます。そこで、gapを使いました。親要素の両端の余白は除外してくれるので便利です。gap: 行間 列間;とまとめて書く事も出来ます。

row-gap:行間 / column-gap:列間 と別々に書いてもOKです。

  display: flex;
  flex-wrap: wrap;
  gap: 10px; //行と列共に10px

画像を並べた所、最後の1箱のサイズがどうも変。回避策として正しいのか分かりませんが、解決シェアします。親に箱4つで、横2箱2列とした場合です。(列はどうでも良いのですが)

padding:0;でサイズが整うという事なので、追加した所、最後の1箱が大きくなる問題は無くなりました。widthは、余白を10px取ったので、箱と箱の中間に10pxつきます。横2箱なので、横幅を50%とし、余白の10pxを除きました。

.親要素{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .箱{width:calc(50% - 10px);
      padding: 0;
      }
  }

display: flex;の解除

スマホ用に横並びを縦にする必要がある場合、flexを解除しなければなりません。display:blockで解除できるので、メディアクエリを使って調整します。

@media (max-width: 575.98px) {
ul{display:block;
    li{width:100%;
    margin-bottom: 20px; //ボックス同士がくっつかない様に
    }
}
}

Flexboxの縦並べ

上記の解除方法ではなく、縦並にするのと、と行間の余白でもOKです。

ul{
display: flex;
flex-direction: column;
row-gap:28px
}

Box-sizingでより便利に

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX