レイアウトのためのFlexbox

Flexbox（Flexible Box Layout）は、1次元レイアウト向けに設計されたCSSレイアウトモデルです。1つの行または列に沿って空間を分配します。floatベースのレイアウトではうまく解決できなかった問題を、洗練された方法で解決できます。

コンテナにdisplay: flexを適用します。その直接の子要素は自動的にフレックスアイテムになります。これらのアイテムの子要素には影響しません。

主軸を設定します。row（デフォルト）：アイテムを左から右へ配置します。row-reverse：右から左へ配置します。column：上から下へ配置します。column-reverse：下から上へ配置します。

主軸に沿って空間を分配します。flex-start（デフォルト）、flex-end、center、space-between、space-around、space-evenlyがあります。

交差軸（主軸に垂直な軸）に沿ってアイテムを配置します。stretch（デフォルト）、center、flex-start、flex-end、baselineがあります。

gap: row-gap column-gapは、marginを使わずにフレックスアイテム間の空間を追加します。marginを使う方法よりもはるかにすっきりします。最新のブラウザで広くサポートされています。

デフォルトでは、フレックスアイテムは1行に収まるように縮みます。flex-wrap: wrapを使うと、収まりきらないときに新しい行へ折り返されます。gapと組み合わせると、シンプルなレスポンシブグリッドを作成できます。

フレックスアイテムではflex: grow shrink basisを指定します。flex: 1は1 1 0%の短縮記法で、アイテムは均等に拡大し、コンテンツサイズを無視します。flex: 0 0 200pxは、固定幅200pxのアイテムを作成します。

フレックスアイテムに指定したalign-selfは、そのアイテムに限り、コンテナのalign-itemsを上書きします。1つのアイテムだけを兄弟要素とは異なる位置に配置する場合に便利です。

orderは、HTMLの順序を変更せずにフレックスアイテムの視覚的な順序を制御します。デフォルトは0です。値が小さいものほど先に表示されます。視覚的な順序とDOMや読み上げの順序に不一致が生じるため、使用は控えめにしてください。

要素を水平方向と垂直方向の両方で中央に配置する最も簡単な方法は、親要素にdisplay: flex; justify-content: center; align-items: centerを設定することです。

主軸に沿ってアイテム間の空間を分配するFlexboxプロパティはどれでしょうか。

コンテナにはdisplay: flexを指定します。軸にはflex-direction: rowまたはcolumnを使用します。主軸方向の間隔にはjustify-content、交差軸方向にはalign-itemsを使用します。間隔にはgap、複数行にはflex-wrapを使用します。アイテムの拡大にはflex短縮記法を使用します。柔軟性に優れた1次元レイアウトシステムです。