CSS ・ Flexbox・Grid
Flexbox
親（コンテナ）と子（アイテム）で横に並べる
Flexbox は、要素を横並び（または縦並び）に配置するためのしくみです。親要素に display: flex を書き、並べ方は親と子それぞれのプロパティで調整します。
01
サンプルコード
HTML
1<div class="flex">
2 <div class="flex__item">1</div>
3 <div class="flex__item">2</div>
4 <div class="flex__item">3</div>
5</div>
CSS
1.flex {
2 display: flex;
3 gap: 8px;
4}
5.flex__item {
6 padding: 12px 20px;
7 background: #b68235;
8 color: #fff;
9}
02
実行結果
ブラウザでの表示親の .flex に display: flex を書くだけで、子の .flex__item が横に並びます
03
解説
Flexbox は、コンテナ（親要素） と アイテム（子要素） の2つで構成されます。要素を横並びで配置したいときに使い、実際の案件でも見かけないことはまずないほどよく使われます。
使い方は、並べたい要素を囲む親要素に display: flex を指定するだけです。すると直下の子要素が横一列に並びます。
Flexbox のプロパティには、親要素に書くもの と 子要素に書くもの があります。書く場所を間違えると効かないので、下の一覧で確認しながら使います。
04
応用例・注意点
Flexbox の用語
| 用語 | 説明 |
|---|---|
フレックスコンテナ | display: flex を指定した親要素 |
フレックスアイテム | コンテナの直下にある子要素（孫要素は含まない） |
主軸 | アイテムが並ぶ方向。初期値は横（左から右） |
交差軸 | 主軸と直角の方向。横並びのときは縦 |
ロゴとメニューを左右に分けて並べる
親に display: flex と justify-content: space-between を書くと、ヘッダーの定番レイアウトになります。
HTML
1<header class="header">
2 <p class="logo">ACT HOUSE</p>
3 <nav>メニュー</nav>
4</header>
CSS
1.header {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5}
注意点
- 01display: flex は並べたい要素そのものではなく、それを囲む親要素に書きます。
- 02効くのは直下の子要素だけです。孫要素も並べたいときは、子要素にも display: flex を指定します。
05
親と子に書くプロパティ一覧
Flexbox のプロパティを、書く場所ごとにまとめました。まずは flex-direction・flex-wrap・justify-content・align-items・gap（親） と order・flex（子） を覚えれば、ほとんどのレイアウトが作れます。
親要素（コンテナ）に書くプロパティ
| プロパティ | 役割 |
|---|---|
flex-direction | 子要素を並べる向き（横・縦・逆順） |
flex-wrap | 子要素を折り返すかどうか |
flex-flow | flex-direction と flex-wrap をまとめて指定（例：flex-flow: row wrap;） |
justify-content | 子要素の水平方向（主軸方向）の位置 |
align-items | 子要素の垂直方向（交差軸方向）の位置 |
align-content | 折り返して複数行になったときの、行全体の垂直方向の位置 |
gap（column-gap・row-gap） | 子要素同士の間隔 |
子要素（アイテム）に書くプロパティ
| プロパティ | 役割 |
|---|---|
order | 並び順 |
flex-grow | 伸び率（余った幅をどの割合でもらうか） |
flex-shrink | 縮み率（幅が足りないときにどの割合で縮むか） |
flex-basis | ベースの幅（伸び縮みする前の基本の大きさ） |
flex | flex-grow・flex-shrink・flex-basis をまとめて指定 |
align-self | その子要素だけの垂直方向の位置（align-items を個別に上書き） |
「水平・垂直」と「主軸・交差軸」
justify-contentは水平方向、align-itemsは垂直方向と覚えておけば、横並びのときは十分です。- 正確には「主軸」「交差軸」の向きです。
flex-direction: columnで縦並びにすると、2つの向きが入れ替わります。