バナーなどを横に並べたい時、float:leftの回り込みを使っていませんでしたか？それも正解なのですが、Flexboxなら、もっと簡単に実装できるのでご紹介します。うん、楽なはず。
INDEX
共通 html
背景があって、白い部分がcontainerだとします。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>※ 2021年現在、基本のdisplay: flex;に、IE11様の display: -ms-flexbox; を追加するだけで事足りる様です。
基本的な横並び
ul {
display: -ms-flexbox;
display: flex;
}横並び中央寄せ
ul {
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}均等に横並び（左右の余白あり）
ul {
display: -ms-flexbox;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
}均等に横並び（左右の余白なし）
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を付けない
並び順を変える
ul {
display: -ms-flexbox;
display: flex;
}
ul li:nth-of-type(3) {
-webkit-order: -1;
order: -1;
} nth-of-typeについては、[CSS] 便利！擬似クラスで〇番目を指定する でもご紹介しています。
高さいろいろ
display:flex;は、中の箱（li）の高さを自動的に揃えてくれます。揃えない場合のアレコレ
align-itemsをulに書き足すと、コンテンツの内容量に応じて、箱（li)はバラバラの高さになります。あとは、どこで揃えるか。
- align-items:flex-start; 上揃え
- align-items:flex-end; 下揃え
- align-items:flex-center; 中央揃え
Box-sizingでより便利に
あわせて読みたい
[CSS] box-sizingとボックスの横並び
Topページに新着3件など、ボックスを横並びにする事ってありますよね。高さが揃わない、はみ出るなど、なかなか上手にいかない事も。実際に横並びにするのは、display:f…
コメント