flexbox は、余白の配分やコンテンツの並び方を指定することで、ページ構成要素を配置するためのレイアウト方法です。縦方向や横方向、1 つの軸に沿ってレイアウトすることも、複数の行を介してレイアウトすることもできます。
また flexbox は異なる画面サイズや、異なるデバイスにも対応させることができ、レスポンシブデザインを構築する際に必要不可欠な要素になります。
flexbox は要素の親子関係にそれぞれ値を設定することで動作します。display: flex; と指定された要素はフレックスコンテナ（flex container）となり、その子要素の配置を自由自在に操ることができます。フレックスコンテナ直下の子要素はフレックスアイテム（flex item）となります。
<div class='parent'>
<div class='child bg-red'></div>
<div class='child bg-blue'></div>
<div class='child bg-yellow'></div>
</div>
.parent {
width: 500px;
height: 350px;
color: white;
background-color: yellowgreen;
/* フレックスアイテムを横並びにします */
display: flex;
}
.child {
width: 100px;
height: 100px;
}
.bg-red {
background-color: salmon;
}
.bg-blue {
background-color: royalblue;
}
.bg-yellow {
background-color: gold;
}
フレックスアイテムをフレックスコンテナとして、その子要素をフレックスアイテムとすることもできます。複雑なレイアウトを実現するために、flexbox を繰り返し使うこともあります。
フレックスコンテナ内では、フレックスアイテムは主軸（main-axis）に沿って配置されます。上記の例では水平方向が主軸ですが、垂直方向が主軸になることもあります。主軸に対して垂直に交わる軸を交差軸（cross-axis）といいます。
上記の例では、全てのフレックスアイテムが左方向に寄り、右側が空白となっています。フレックスコンテナに追加で値を指定することで、要素の配置を自由自在に変更することができます。
・flex-direction
flex-direction プロパティでは、フレックスアイテムが並ぶ主軸を指定することができます。flex-direction プロパティでは、キーワード row, row-reverse, column, column-reverse が使用できます。デフォルト値は row です。
row あるいは row-reverse を指定した場合、水平方向にフレックスアイテムが配置されます。row-reverse では主軸を逆向きに変更することができます。
一方、column あるいは column-reverse を指定した場合、垂直方向にフレックスアイテムが配置されます。column-reverse では主軸を逆向きに変更することができます。
<div class='parent row'>
<div class='child bg-red'>1</div>
<div class='child bg-blue'>2</div>
<div class='child bg-yellow'>3</div>
</div>
<div class='parent row-reverse'>
<div class='child bg-red'>1</div>
<div class='child bg-blue'>2</div>
<div class='child bg-yellow'>3</div>
</div>
<div class='parent column'>
<div class='child bg-red'>1</div>
<div class='child bg-blue'>2</div>
<div class='child bg-yellow'>3</div>
</div>
<div class='parent column-reverse'>
<div class='child bg-red'>1</div>
<div class='child bg-blue'>2</div>
<div class='child bg-yellow'>3</div>
</div>