CSSのFlexboxを使用する事で「簡単」にレスポンシブなレイアウトを組む事が出来ます。
例えば、「ナビゲーションメニュー」や「サイドバー」、「カードレイアウト」をCSSを数行書くだけで実現する事が可能です。
例えば、ランディングページで良く見かける様な以下の様なカードレイアウト。
Bootstrapの様なCSSフレームワークを使用しても良いですが、Flexboxを使えば一瞬です。
この記事では、実際にあなたと一緒にコードを書きながら、CSSのFlexboxを基礎中の基礎から解説していきます。
CSSの基礎中の基礎を学んだ次の一歩として「Flexbox」をマスターしましょう！
Flexboxとは？
フレックスコンテナー（Flex Container）とフレックスアイテム（Flex Item）を使って、表示要素を縦並びにしたり横並びにする事が出来ます。
コンテナとは、内部に物を入れるための容器で、フレックスコンテナーの中にフレックスアイテムが格納されます。
Flexboxのポイント
Flexboxを使用する上で、大まかな流れを頭に入れておきましょう。
- 親要素にFlexboxを宣言（display: flex）
- 要素の並び順（縦・横）を定義（flex-direction）
- 要素の水平方向の並び方を定義（justify-content）
- 要素の折り返しの有無（flex-wrap）
- 要素の垂直方向の位置を指定（align-items）
今は理解できなくても、一つずつコードを書く中で理解してもらえば大丈夫です。
下準備（HTMLとCSS）
まずは、Flexboxの元となるHTMLファイルとCSSファイルを作成しましょう。
<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> <div class="box box7">7</div> <div class="box box8">8</div> <div class="box box9">9</div> </div>
.container{
height: 90vh;
border: 20px solid black;
}
.box{
color: #fff;
font-size: 40px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
/* 各boxの色を定義 */
.box1 {background: #e51400;}
.box2 {background: #fa6800;}
.box3 {background: #f0a30a;}
.box4 {background: #e3c800;}
.box5 {background: #a4c400;}
.box6 {background: #60a917;}
.box7 {background: #00aba9;}
.box8 {background: #1ba1e2;}
.box9 {background: #aa00ff;}
実行結果
１から９までの箱が単純に並び、その周りを黒線が囲む以下の様な例が出力されます。
おまけ（Emmetにも挑戦）
HTMLファイルは１行１行書いても良いですが、折角なのでEmmet記法で書く事にもチャレンジしてみましょう。
.container>.box.box$*9{$}と記述して、Tabを押せば一瞬で作成完了です。
Emmetって何ぞや？という方は、以下の記事を参考にしてください。CodePenなどのオンラインエディタでもEmmetは使用可能です。
【Vue.js】初心者にオススメなエディタは「VSCode」＋「Vetur」
１、親要素にFlexboxを宣言
まずは、Flexboxを使用する場合には、親要素（container）にdisplay:flexを指定します。
.container{
height: 90vh;
border: 20px solid black;
display: flex;
}
たったこれだけ！
display:flexを適用するのは親要素（container）です。間違えて子要素（box）に適用しない様に気をつけましょう。
実行結果
Flexboxが適用され、１から９のBoxが横並びになれば成功です。
これは、２で解説する「flex-direction」の初期値が横並びで左から右になっているからです。ここから、レイアウトを調整していきます。
2、要素の並び順を決定（flex-direction）
flex-directionを指定する事で、要素の並び順を指定する事が出来ます。
デフォルトは、水平（横）方向に左から右へと配置ですが、４パターンの中から選ぶ事が可能です。
.container{
/* 水平方向に左から右へと配置(デフォルト) */
flex-direction:row;
/* 水平方向に右から左へと配置 */
flex-direction:row-reverse;
/* 垂直方向に上から下へと配置 */
flex-direction:column;
/* 垂直方向に下から上へと配置 */
flex-direction:column-reverse;
}
実行結果
flex-directionの4パターンをそれぞれ適用すると、結果が以下の様に切り替われば成功です！
３.要素の水平方向の並び方を定義（justify-content）
justify-contentで要素の水平方向の位置を指定する事が出来ます。
.container{
/* 要素を左揃えで配置（デフォルト） */
justify-content: flex-start;
/* 要素を右揃えで配置 */
justify-content: flex-end;
/* 要素を中央揃えで配置 */
justify-content: center;
/* 両端は余白無し。他の要素は均等に間隔を空けて配置 */
justify-content: space-between;
/* 両端含めて左右の間隔を均等に配置。中央は左スペース＋右スペースなので両端スペース（左・右のみ）の倍*/
justify-content: space-around;
}
実行結果
「左揃え」、「右揃え」、「中央揃え」、「均等間隔（両端の余白無し）」、「均等間隔」の順に指定した結果は以下の通りです。
4.要素の折り返しの有無を指定（flex-wrap）
flex-wrapで要素の折り返しの有無を指定する事が出来ます。
折り返しが発生する様に子要素（box）の横幅を広げています。
.container{
/* 折り返し無し。１列に配置（デフォルト） */
flex-wrap: no-wrap;
/* 折り返し有り */
flex-wrap: wrap;
/* 折り返し有り（逆順） */
flex-wrap: wrap-reverse;
}
.box{
width:33.33%;
}
実行結果
折り返し無し（no-wrap）から、折り返し有り（wrap）、折り返し有り(逆順)（wrap-reverse）へと切り替われば成功です。
横幅を33.3%としているので、各列でそれぞれ３つのBoxが並んでいます。
5.要素の垂直方向の位置を指定（align-items）
align-itemsで要素の垂直方向の位置を揃える事が出来ます。
.container{
/* 要素の上下の余白を埋める様に配置（デフォルト） */
align-items: stretch;
/* 要素を上揃えで配置 */
align-items: flex-start;
/* 要素を下揃えで配置 */
align-items: flex-end;
/* 要素を中央揃えで配置 */
align-items: center;
/* 要素をベースラインで揃えて配置 */
align-items: baseline;
}
.box2 {
height: 70%
}
.box4 {
height: 20%
}
.box6 {
height: 90%
}
.box8 {
height: 80%
}
垂直方向の揃い方を観察する為に、偶数番号のBoxの高さを調整しています。
実行結果
奇数番号のBoxは最初余白無しとなっていますが、これはalign-items: stretch;で余白を埋める様に配置されている結果です。
FlexboxやモダンなCSSについて更に深く学びたい方へ
このページではFlexboxの基礎について学習してきましたが、更に高度なCSSやCoolなアニメーションを学びたいあなたには、Advanced CSS and Sass: Flexbox, Grid, Animations and More! がオススメです。
「Natour」や「Trillo」という架空の旅行予約サイトを作成しながら、Flexboxの応用的な使い方や、モダンなCSSについて学習出来ます。
ProgateのCSS講座だけでは、CSSで守るべき設計原則や、プロのエンジニアが実際の開発現場で使う様なNPMといったツールについての解説が全く足りていないのが現状です。
Progateの後に楽しみながらステップアップしたい人には絶対にオススメのコースです。
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
参考サイト
Flexboxについて図解付きで理解したい場合は、以下のサイトも英語ですがオススメです。