要素を横並びで配置するとき、かつてはfloatプロパティを使って左に流し込んでいた人も多いと思います。今では「flexプロパティ」を使うことでコードもスッキリ記述できるようになりました。グローバルナビ、コンテンツ、リンクバナーなど横並びに均等に配置したい！という場面で便利なflexプロパティを自在に扱えるように覚えておきましょう。
flexboxとは
flexboxとは「flexible box layout module」の略で、レイアウトに特化したCSSプロパティです。
・要素同士の余白を均等にしたい
・横並びにしたバナーが増えたら複数行に自動で折り返しさせたい
・画像とテキストエリアを交互に配置したい
このような要望に応えてくれるのが「flexbox」で、レイアウト作業を各段に効率アップしてくれます！
flexboxの基本的な使い方
簡単に言ってしまえば、
それでは解説していきます！まずはHTMLの構成として、下図のように親要素（flexコンテナ）のクラス名に「.flex-container」を付け、子要素（flexアイテム）のクラス名に「.flex-item」を付けています。
まずは、基本となるHTMLとCSSを記述します。
▼HTML
|
1 2 3 4 5 6 7 8 |
<ul class="flex-container"> <li class="flex-item">flexitem-1</li> <li class="flex-item">flexitem-2</li> <li class="flex-item">flexitem-3</li> <li class="flex-item">flexitem-4</li> <li class="flex-item">flexitem-5</li> <li class="flex-item">flexitem-6</li> </ul> |
▼CSS
|
1 2 3 4 5 6 7 8 9 10 |
.flex-container{ width:98%; margin:1%; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-bottom:1px; } |
まだflexプロパティの記述をしていないため、子要素li（flexアイテム）は、上から順位そのまま縦並びに配置されます。
では、子要素liを横並びにしたいときは「flexbox」を利用します。flexboxの使い方は簡単で、親要素ulに「display: flex;」を指定します。これだけで子要素が横並びになります。
|
1 2 3 4 5 6 7 8 9 10 11 |
.flex-container{ width:98%; margin:1%; display: flex; } .flex-item{ background: #4169e1; padding: 15px; color: #fff; margin-right:1px; } |
子要素である<li class=”flex-item”></li>は、親要素の横幅より小さければ、子要素は左寄せで配置されます。
子要素liを親要素ulの横幅に合わせて均等に配置したい場合は、子要素に対して横幅を指定します。今回は親要素ulに対して、子要素liを６つ横に均等配置したいので、子要素liの横幅を（100%÷6=16.666666%）に指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.flex-container{ width:98%; margin:1%; display:flex; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; width:16.666666%; } |
要素を横並びにしたい！というだけであればこれでOKです！細かい並べ方や位置を指定したい場合は、ここからの（実用編）を参考にしてみてください。
flexboxの使い方（実用編）
flexboxに関するプロパティには大きくわけて２種類あります
- flexコンテナ（親要素）に指定するプロパティ・・・6種類
- flexアイテム（子要素）に指定するプロパティ・・・7種類
並べ方によって記述するのが、親要素なのか子要素なのかが違いますので確認しておきましょう。
▼HTML（共通）
|
1 2 3 4 5 6 7 8 |
<ul class="flex-container"> <li class="flex-item">flexitem-1</li> <li class="flex-item">flexitem-2</li> <li class="flex-item">flexitem-3</li> <li class="flex-item">flexitem-4</li> <li class="flex-item">flexitem-5</li> <li class="flex-item">flexitem-6</li> </ul> |
flexコンテナ（親要素）に指定するプロパティ
flexコンテナ（親要素）に指定するプロパティは以下の6種類です。
- flex-direction｜flexアイテムの並べ方を指定（横並び・縦並び）
- flex-wrap｜flexアイテムの折り返しを指定（なし・上から・下から）
- flex-flow｜flexアイテムの並び方と折り返しを指定（directionとwrapを一括指定）
- justify-content｜flexアイテムの水平位置を指定（中央寄せ・左寄せ・幅100％で均等配置）
- align-items｜flexアイテムの垂直位置を指定（中央揃え・下揃え・大きい子要素に合わせる）
- align-content｜flexアイテムの縦の位置を指定（中央揃え・均等配置・親要素に合わせ伸縮）
flex-direction
flex-directionは、flexアイテム（子要素）の並び方を指定するプロパティです。
- row（初期値）｜横並び、左寄せで「左から右の順」で子要素を配置
- row-reverse｜横並び、右寄せで「右から左の順」で子要素を配置
- column｜縦並び、上寄せで配置「上から下の順」で子要素を配置
- column-reverse｜縦並び、下寄せで「下から上の順」で子要素を配置
例えば、子要素を右寄せ＆右から左の順に配置したい場合（通常の並びと逆）は、親要素に「flex-direction: row-reverse;」を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.flex-container{ width:98%; margin:1%; display:flex; flex-direction: row-reverse; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; } |
次は、子要素を縦並びで下寄せで配置し、その順番を下から上に配置したい場合は、親要素に「flex-direction: column-reverse;」を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.flex-container{ width:98%; margin:1%; display: flex; flex-direction: column-reverse; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-bottom:1px; } |
flex-wrap
flex-wrapは、flexアイテム（子要素）の折り返しを指定するプロパティです。
- wrap｜親要素からはみ出した部分を折り返す
- nowrap｜折り返さない
- wrap-reverse｜逆の順番で折り返す
親要素の横幅のサイズを子要素が超えたときに改行されるようにしたい。この場合は、親要素に「flex-wrap: wrap;」を指定します。※サンプルでは、親要素ul.flec-containerのサイズは画面幅の500pxとしています。※スマホで見るとはみ出てしまうかもしれません・・・。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; flex-wrap: wrap; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; margin-bottom: 1px; } |
次は、逆順で折り返すようにしたい場合は、親要素に「flex-wrap: wrap-reverse;」を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.flex-container{ width:50%; background: #d3d3d3; margin:1%; display:flex; flex-wrap: wrap-reverse; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; margin-bottom: 1px; } |
子要素は左から右へ配置され、改行すると上の段に上がります。
flex-flow
flex-flowは、flexアイテム（子要素）の並び方と折り返しを指定するプロパティです。
flex-flowで指定できる値は以下の表の通りで、「flex-direcrion」と「flex-wrap」と同じ値をショーハンドで指定します。
| flex-flowに指定できる値 | |||
|---|---|---|---|
| flex-directionの値 | flex-wrapの値 | ||
| row | 横並び、左寄せで配置 | wrap | 親要素からはみ出した部分を折り返す |
| row-reverse | 横並び、右寄せで配置 | nowrap | 折り返さない |
| column | 縦並び、上寄せで配置 | wrap-reverse | 逆の順番で折り返す |
| column-reverse | 縦並び、下寄せで配置 | ||
例えば、子要素を縦並びで下寄せにして親要素の高さを超えたら改行するには、「flex-direction:column-reverse;」と「flex-wrap:wrap;」を指定するのと同じく、「flex-flow:column-reverse wrap;」を親要素に記述します。すると、子要素は下から上に縦並びになり、上にはみ出した分は改行し右側へ列をつくるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.flex-container{ width:50%; height:150px; background: #d3d3d3; margin:1%; display:flex; flex-flow: column-reverse wrap; padding:20px; border: 3px solid #111; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; margin-bottom: 1px; width:16.666666%; height:40px; } |
justify-content
justify-contentは、flexアイテム（子要素）の水平位置を指定するプロパティです。左寄せなのか？中央寄せなのか？幅100%に対して均等配置なのか？などを指定します。
- flex-start（初期値）｜左寄せ
- flex-end｜右寄せ
- center｜中央寄せ
- space-between｜両端揃え
- space-around｜両端に均等な余白をつくり均等配置
- space-enenly｜両端と子要素間すべて同じ余白で均等配置
初期値は「flex-start」で、子要素全体が左寄せになりますが、右寄せにしたい場合は「justify-content: flex-end;」で下図のように右寄せ配置になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; justify-content: flex-end; padding:20px; border: 3px solid #111; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px !important; } |
中央寄せにしたい場合は「justify-content: center;」で下図のように右寄せ配置になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; justify-content: center; padding:20px; border: 3px solid #111; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px !important; } |
両端揃えしたい場合は「justify-content: space-between;」で下図のように両端揃えになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; justify-content: space-between; padding:20px; border: 3px solid #111; } .flex-item{ background: #008080; padding: 15px; color: #fff; } |
※点線が親要素ul.flex-contentのエリアです。
両端に均等な余白をつくり均等配置する場合は「justify-content: space-around;」で下図のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; justify-content: space-around; padding:20px; border: 3px solid #111; } .flex-item{ background: #008080; padding: 15px; color: #fff; } |
align-items
align-itemsは、flexアイテム（子要素）の垂直位置を指定するプロパティです。中央揃えなのか？下揃えなのか？一番高さのある子要素に揃えるのか？などを指定します。
- stretch（初期値）｜親要素の高さに合わせて子要素が伸縮する
- flex-start｜親要素の上端で揃える
- flex-end｜親要素の下端で揃える
- center｜親要素の上下中央で揃える
- baseline｜子要素のベースラインで揃える
初期値は「align-items: stretch;」で、親要素ulの高さに合わせてすべての子要素liが伸縮します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.flex-container{ background: #d3d3d3; margin:1%; display: flex; align-items: stretch; padding:20px; border: 3px solid #111; height:300px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px !important; width:16.666666%; } |
親要素の上端で揃えるには「align-items: flex-start;」で下図のように親要素ulの上端に揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; align-items: flex-start; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px !important; width:16.666666%; } |
親要素の上端で揃えるには「align-items: flex-end;」で下図のように親要素ulの上端に揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; align-items: flex-end; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px !important; width:16.666666%; } |
親要素の上下中央で揃えるには「align-items: center;」で親要素ulの上下中央に揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; align-items: center; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px !important; width:16.666666%; } |
align-content
align-contentは、flexアイテム（子要素）の縦の位置を指定するプロパティです。中央揃えなのか？均等配置なのか？親要素に合わせて伸縮するのか？などを指定します。
- flex-start（初期値）｜親要素の上端で揃える
- flex-end｜親要素の下端で揃える
- center｜親要素の上下中央で揃える
- space-between｜親要素の上下の両端に揃える
- space-around｜上下の両端に均等な余白をつくり均等配置
- space-evenly｜上下両端と子要素間すべて同じ高さの余白で均等配置
初期値は「align-content: flex-start;」で、親要素ulの上端に子要素liが揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; align-content: flex-start; flex-wrap: wrap; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px; margin-bottom: 1px; } |
親要素の下端で揃えるには「align-content: flex-end;」で親要素ulの下端に揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; align-content: flex-end; flex-wrap: wrap; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px; margin-bottom: 1px; } |
親要素の上下中央で揃えるには「align-content: center;」で揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; align-content: center; flex-wrap: wrap; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px; margin-bottom: 1px; } |
親要素の上下の両端で揃えるには「align-content: space-between;」で揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; align-content: space-between; flex-wrap: wrap; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px; margin-bottom: 1px; } |
親要素の上下の両端に均等な余白をつくり均等配置するには「align-content: space-around;」で揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; align-content: space-around; flex-wrap: wrap; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px; margin-bottom: 1px; } |
親要素の上下両端と子要素間すべて同じ高さの余白で均等配置するには「align-content: space-evenly;」で揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ width:500px; background: #d3d3d3; margin:1%; display:flex; align-content: space-evenly; flex-wrap: wrap; padding:20px; border: 3px solid #111; height:200px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right: 1px; margin-bottom: 1px; } |
gap
gapは、flexアイテム（子要素）同士の余白の大きさを指定するプロパティです。
- row-gap｜縦方向の子要素同士の余白を指定
- column-gap｜横方向の子要素同士の余白を指定
- gap｜縦方向の余白と横方向の余白を同時に指定（row-gap column-gapの順に記述）
縦方向の子要素同士の余白の間隔のサイズは「row-gap」で指定し、横方向のサイズは「column-gap」で指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.flex-container{ background: #d3d3d3; margin:1%; display: flex; flex-wrap: wrap; padding:20px; border: 3px solid #111; width:500px; height:auto; row-gap: 30px; column-gap:30px; } .flex-item{ background: #008080; padding: 15px; color: #fff; width: 100px; height: 100px; } |
また、縦方向の余白（row-gap）と横方向の余白（column-gap）を同時に指定できる「gap」があります。記述の仕方は「gap: row-gap（縦方向） column-gap（横方向）」です。
試しに「row-gap:50px;」と「column-gap:10pxl;」を指定してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flex-container{ background: #d3d3d3; margin:1%; display: flex; flex-wrap: wrap; padding:20px; border: 3px solid #111; width:500px; height:auto; gap: 50px 10px; } .flex-item{ background: #008080; padding: 15px; color: #fff; width: 100px; height: 100px; } |
ここまでが、flexコンテナ（親要素）に指定できるプロパティの解説でしたが、次からはflexアイテム（子要素）に指定できるプロパティの解説になります。
flexアイテム（子要素）に指定するプロパティ
flexアイテム（子要素）に指定するプロパティは以下の7種類です。
- order｜flexアイテムの表示する順番を数値で指定（-1.0.1）
- flex-grow｜flexアイテムの横幅の伸び率を数値で指定（1.2.3）
- flex-shrink｜flexアイテムの横幅の縮み率を数値で指定（1.2.3）
- flex-basis｜flexアイテムの基準の大きさを数値で指定（auto.50px.30%）
- flex｜flexアイテムの伸縮率と基準の大きさをショートハンド指定（flex-grow、flex-shrink、flex-basis）
- align-self｜flexアイテムの縦の位置を個別に指定（上端揃え・中央揃え・下端揃え）
- gap｜flexアイテム同士の余白の大きさを指定
order
orderは、flexアイテム（子要素）の表示する順番を指定するプロパティです。
orderには数値を指定しますが、初期値は「0」でマイナスの数値も指定することができます。並び順は「マイナス値→0または指定なし→プラス値」となります。すべての子要素に数値を指定しても良いし、特定の子要素だけに指定しても構いません。その際、指定のない子要素は「order: 0;」と同じ扱いになります。
▼HTML
|
1 2 3 4 5 6 7 8 |
<ul class="flex-container"> <li class="flex-item item-1">flexitem-1</li> <li class="flex-item item-2">flexitem-2</li> <li class="flex-item item-3">flexitem-3</li> <li class="flex-item item-4">flexitem-4</li> <li class="flex-item item-5">flexitem-5</li> <li class="flex-item item-6">flexitem-6</li> </ul> |
▼CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; padding:20px; border: 3px solid #111; height:100px; } .flex-item{ background: #008080; padding: 15px; color: #fff; text-shadow: none; margin-right:1px; width:16.666666%; } .item-1{order: 2;} .item-2{order: 1;} .item-3{order: 0;} .item-4{order: -1;} .item-5{order: -2;} |
flex-grow
flex-growは、flexアイテム（子要素）の横幅の伸び率を数値で指定するプロパティです。
flex-growには数値を指定しますが、初期値は「0」でマイナスの数値は指定できません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.flex-container{ background: #d3d3d3; margin:1%; display: flex; padding:20px; border: 3px solid #111; height:100px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; } .item-1{flex-grow:1;} .item-2{flex-grow:2;} .item-3{flex-grow:3;} .item-4{flex-grow:4;} .item-5{flex-grow:5;} |
flex-shrink
flex-shrinkは、flexアイテム（子要素）の横幅の縮み率を数値で指定するプロパティです。
flex-shrinkには数値を指定しますが、初期値は「1」でマイナスの数値は指定できません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.flex-container{ background: #d3d3d3; margin:1%; display: flex; padding:20px; border: 3px solid #111; height:100px; width:50%; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; width:20%; } .item-1{flex-shrink:1;} .item-2{flex-shrink:2;} .item-3{flex-shrink:3;} .item-4{flex-shrink:4;} .item-5{flex-shrink:5;} |
親要素ulに対してwidth:50%（画面全体の50%）を指定し、子要素に対してwidth:20%を指定しています。通常であれば、子要素は6個あるので20%×6個=120％となり、親要素の横幅をはみ出してしまいますが、flex-shrinkによって縮み率を指定しています。
flex-basis
flex-basisは、flexアイテム（子要素）の基準の大きさを数値で指定するプロパティです。
flex-basisには「auto、数値、％」を指定します。が、初期値は「0」でマイナスの数値は指定できません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; padding:20px; border: 3px solid #111; height:100px; width:800px; } .flex-item{ background: #008080; padding: 15px; color: #fff; margin-right:1px; width:20%; } .item-1{flex-basis:auto;} .item-2{flex-basis:1;} .item-3{flex-basis:5;} .item-4{flex-basis:10px;} .item-5{flex-basis:30%;} |
align-self
align-selfは、flexアイテム（子要素）の縦の位置を個別に指定するプロパティです。
- auto（初期値）｜親要素のalign-itemsの値に合わせて子要素を配置
- flex-start｜親要素の上端で揃える
- flex-end｜親要素の下端で揃える
- center｜親要素の上下の中央に揃える
- baseline｜子要素をベースラインで揃える
- stretch｜親要素に高さに合わせて子要素を伸縮する
初期値は「align-content: auto;」で、親要素のalign-itemsの値に合わせて子要素を配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.flex-container{ background: #d3d3d3; margin:1%; display:flex; padding:20px; border: 3px solid #111; height:300px; } .flex-item{ background: #008080; padding: 15px; color: #fff; text-shadow: none; margin-right:1px; width:20%; } .item-1{align-self:auto;} .item-2{align-self:flex-start;} .item-3{align-self:flex-end;} .item-4{align-self:center;} .item-5{align-self:baseline;} .item-6{align-self:stretch;} |
まとめ
flexboxには多くの指定できるプロパティが存在します。見ていただいた通り、数が多いので結局よくわからなくなってしまったという人もいると思います。要は『親要素に対して「display: flex;」を指定すればOK！』とだけますは覚えておいて、細かい配置を調整するにはどうしたらいいかな？となった時に必要な情報だけ確認するようにするので良いと思います。すべて覚えておくのは大変ですからね・・・。
横並びにしたいものは大抵、ナビゲーションであったり、コンテンツの均等配置であったり、が主な利用用途だと思いますので、それぞれにフォーカスした記事も後ほど残しておこうと思います。記事があがったらチェックしてみてください。