CSSで横並びレイアウトを簡単に作成できるFlexbox
CSSを使って要素を横並びにしたいことがあります。たとえば、広告を左右に2つ並べたり、グローバルメニューの各項目を横並びで表示するときです。
以前は「float: left;」や「float: right;」を駆使して実現していたかもしれませんが意外と面倒です。
そんなときはCSSのFlexboxです。「float: left;」よりも簡単に複数の要素を横並びにすることができます。
CSSで要素を横並びにできるFlexbox
Flexboxを使って項目を横並びにする方法を紹介します。
たとえば、次のような項目があります。「メニュー1」~「メニュー6」が横並びにしたい項目です。この例はdivタグですが、1つのulタグで複数のliタグを囲む場合などでも同じです。
<div class="box01"> <div class="item">メニュー1</div> <div class="item">メニュー2</div> <div class="item">メニュー3</div> <div class="item">メニュー4</div> <div class="item">メニュー5</div> <div class="item">メニュー6</div> </div>
何も指定しなければ上から下に表示されるだけです。
![何も指定しなければ上から下に表示されるだけ](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_19-09-21.png)
Flexboxで横並びにするのは簡単です。
外枠に対して「display: flex;」と指定するだけです。
.box01 { display: flex; }
表示結果は次のようになります。見づらいかもしれませんが個々の要素が横並びに表示されます。
![「display: flex;」で横並び](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_19-13-26.png)
ちなみに、Flexboxでは個々の要素のことをFlexアイテム、要素を格納する外枠のことをFlexコンテナといいます。次のようなイメージです。
![FlexコンテナとFlexアイテム](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-21_16-58-58.png)
見やすいように個々の要素(Flexアイテム)にスタイルを設定してみます。これはFlexbox固有の機能ではなく一般的な枠線と余白のCSSです。
.box01 { display: flex; } .box01 .item { border: solid 1px #000; margin: 5px; padding: 5px; }
個々の要素が横並びになっていることがわかります。
![横並びになった要素](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_19-19-11-710x63.png)
これができれば、さまざまな用途で使えそうですよね。
- 広告の横並び
- メニューの横並び
- 投稿の横並び
- 画像の横並び(ギャラリー)
要素の縦並び
Flexboxは横並び専用のCSSではありません。
flex-directionプロパティで表示方向(column)を指定して縦並びにもできます。
.box01 { display: flex; flex-direction: column; } .box01 .item { border: solid 1px #000; margin: 5px; padding: 5px; }
要素が縦並びになります。
![「flex-direction: column」で要素が縦並びに](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_19-29-25.png)
グローバルメニューや広告など、「PCでは横並び、スマホでは縦並び」を実現したい場合にも、flex-directionで簡単に切り替えられますね。
横並びの列数指定
要素全体を横並びにする方法を紹介しましたが、常に全ての要素を1行で横並びにしたいわけではありません。
「3列×2行」のようなレイアウトはどうすれば良いでしょうか。
その場合、個々の要素の幅(width)を指定します。たとえば、3列の場合は33%、2列の場合は50%、などです。
同時に、要素を折り返すため「flex-wrap: wrap;」を指定します。
.box01 { display: flex; flex-direction: row; flex-wrap: wrap; } .box01 .item { border: solid 1px #000; margin: 5px; padding: 5px; width: 31%; }
これで3列ずつの横並びになります。
![3列で横並び](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_20-06-30-710x58.png)
要素のサイズについて「3列の場合は33%、2列の場合は50%」と説明しましたが、要素間に余白がある場合、小さく指定する必要があります。本来は「calc」を使って正確なサイズを指定すべきかもしれませんが、とりあえず上記のように少し小さいサイズ(3列の33%を31%に)にするだけでも大丈夫です。
全体のセンタリング
要素を横並びにする場合、必ずしも全幅(100%幅)とは限りません。その場合、左寄せになります。
![全体が左寄せになる](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_20-15-56-710x34.png)
全体をセンタリングするにはFlexコンテナ(外枠)に対して「justify-content: center;」を使います。紛らわしいですが、「text-align: center;」は個々の要素内の文字をセンタリングしています。
.box01 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .box01 .item { border: solid 1px #000; margin: 5px; padding: 5px; width: 100px; text-align: center; }
全体がセンタリングされます。
![Flexboxのセンタリング](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-20_20-20-51-710x34.png)
まとめ
以上、簡単にではありますが、Flexboxの使い方を紹介しました。広告やグローバルメニューの横並び、また、横並びと縦並びの切り替え、センタリング、複数行へのレイアウトも簡単なことが実感できたと思います。
興味がある方は、ぜひお試しください。