Flexboxとは
Flexbox（Flexible Boxの略）は、ウェブページ内の要素の配置を、より効率的かつ柔軟に行うためのCSSレイアウトモデルです。特に、コンテナ内のアイテムを一次元の方向（行または列）に沿って配置し、アイテム間のスペース配分や位置調整を簡単にするために設計されました。
従来のfloatやpositionプロパティを用いたレイアウトと比較して、レスポンシブデザインの実装や複雑な配置（例：垂直方向の中央揃え）を大幅に簡素化できます。任意のHTML要素をFlexコンテナとして設定することで、その直下の子要素はFlexアイテムとなり、Flexboxの強力な機能の恩恵を受けられるようになります。
Flexboxレイアウトの主な特徴
Flexboxは、ウェブコンテンツの配置において以下の重要な特性を提供します。
- 主軸と交差軸: Flexコンテナには、アイテムが並ぶ方向を示す「主軸（main axis）」と、それに垂直な「交差軸（cross axis）」が存在します。これらは
flex-directionプロパティによって定義されます。 - Flexコンテナ: 親要素に
display: flexまたはdisplay: inline-flexを設定することで、Flexコンテナとして機能し、その子要素に柔軟なレイアウトを適用します。 - Flexアイテム: Flexコンテナの直下の子要素はFlexアイテムとなり、主軸および交差軸上でのサイズ、順序、整列方法などを個別に制御できます。
- 主軸方向の整列:
justify-contentプロパティを使用し、主軸に沿ってFlexアイテムの配置や余白の分配方法を調整できます。 - 交差軸方向の整列:
align-itemsプロパティにより、交差軸上でFlexアイテムの整列（上端、下端、中央、引き伸ばしなど）を制御します。 - 改行と自動調整:
flex-wrapプロパティによって、アイテムがコンテナからはみ出す場合に改行するかどうかを制御し、アイテムのサイズも自動的に調整する能力を持ちます。
これらの特性により、Flexboxは多様なスクリーンサイズやデバイスタイプに対応する、非常に柔軟でレスポンシブなウェブレイアウトを効率的に構築することを可能にします。
Flexコンテナの基本
HTML要素をFlexコンテナにするには、そのdisplayプロパティをflexまたはinline-flexに設定します。これにより、その要素の直下にある全ての子要素は自動的にFlexアイテムとして扱われます。以下の例では、layout-wrapperがFlexコンテナ、item-boxがFlexアイテムです。
<style>
.layout-wrapper {
display: flex;
border: 2px solid #333;
padding: 10px;
}
.item-box {
background-color: lightblue;
padding: 20px;
margin: 5px;
}
</style>
<div class="layout-wrapper">
<div class="item-box">アイテム1</div>
<div class="item-box">アイテム2</div>
</div>
Flexコンテナが設定されると、Flexアイテムは初期状態で以下の振る舞いをします。
- 要素は一行に並びます（
flex-directionの初期値はrow）。 - 要素は主軸の開始位置から配置されます。
- 要素は主軸方向には引き伸ばされませんが、必要に応じて縮小することがあります。
- 要素は交差軸のサイズいっぱいに引き伸ばされます。
flex-basisプロパティはautoです。flex-wrapプロパティはnowrapです。
Flexコンテナのプロパティ
4.1. flex-direction: 主軸の方向を定義する
このプロパティは、Flexアイテムが配置される主軸の方向と、その開始点を指定します。
.flex-container {
flex-direction: row | row-reverse | column | column-reverse;
}
row(デフォルト値): アイテムは左から右へ水平に並びます。主軸は水平方向、交差軸は垂直方向になります。row-reverse: アイテムは右から左へ水平に並びます。主軸は水平方向、交差軸は垂直方向になります。column: アイテムは上から下へ垂直に並びます。主軸は垂直方向、交差軸は水平方向になります。column-reverse: アイテムは下から上へ垂直に並びます。主軸は垂直方向、交差軸は水平方向になります。
4.2. flex-wrap: アイテムの折り返しを制御する
flex-wrapプロパティは、Flexコンテナ内にFlexアイテムが収まらない場合に、アイテムを折り返すかどうかを指定します。
.flex-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(デフォルト値): アイテムは折り返さず、一行に並び続けます。コンテナからはみ出すことがあります。wrap: アイテムは必要に応じて複数行に折り返します。新しい行は上から下へ配置されます。wrap-reverse: アイテムは必要に応じて複数行に折り返します。新しい行は下から上へ配置されます。
4.3. justify-content: 主軸上でのアイテムの整列
このプロパティは、Flexアイテムが主軸上でどのように配置され、利用可能な余白がどのように分配されるかを定義します。
.flex-container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start(デフォルト値): アイテムは主軸の開始位置に寄せて配置されます。flex-end: アイテムは主軸の終了位置に寄せて配置されます。center: アイテムは主軸の中心に配置されます。space-between: アイテムは両端に配置され、その間の余白が均等に分配されます。space-around: 各アイテムの両側に均等な余白が配置されます。アイテム間の余白は、アイテムとコンテナの端の余白の2倍になります。space-evenly: アイテム間およびアイテムとコンテナの端の余白がすべて均等に分配されます。
4.4. align-items: 交差軸上でのアイテムの整列
align-itemsプロパティは、Flexアイテムが交差軸上でどのように整列されるかを制御します。これは、コンテナの単一行または各行全体に適用されます。
.flex-container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start: アイテムは交差軸の開始位置に寄せて配置されます。flex-end: アイテムは交差軸の終了位置に寄せて配置されます。center: アイテムは交差軸の中心に配置されます。baseline: アイテムはそれぞれのベースラインに合わせて配置されます。stretch(デフォルト値): アイテムは、高さが明示的に設定されていない場合、交差軸方向いっぱいに引き伸ばされます。
4.5. align-content: 複数行のFlexアイテムの整列
このプロパティは、flex-wrap: wrapが設定されており、Flexアイテムが複数行に折り返した場合に、それらの行全体を交差軸上でどのように整列させるかを定義します。アイテムが一列しかない場合は効果がありません。
.flex-container {
flex-wrap: wrap; /* align-contentを有効にするには必須 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start: アイテムの行は交差軸の開始位置に寄せて配置されます。flex-end: アイテムの行は交差軸の終了位置に寄せて配置されます。center: アイテムの行は交差軸の中心に配置されます。space-between: アイテムの行は両端に配置され、その間の余白が均等に分配されます。space-around: 各行の両側に均等な余白が配置されます。行間の余白は、行とコンテナの端の余白の2倍になります。stretch(デフォルト値): アイテムの行は、高さが明示的に設定されていない場合、交差軸方向いっぱいに引き伸ばされ、利用可能なスペースを埋めます。
4.6. align-content と align-items の違い
align-itemsは、Flexコンテナが単一行の場合、または複数行の場合でも各行内のアイテムを交差軸上で整列させるために使用されます。align-contentは、flex-wrap: wrapが設定された複数行のFlexアイテムの行全体を、交差軸上でどのように整列させるかを制御します。単一行の場合は効果がありません。
簡単に言えば、単一行のFlexアイテムの垂直方向の配置にはalign-itemsを、複数行のFlexアイテムの行グループ全体の垂直方向の配置にはalign-contentを使用します。
Flexアイテムのプロパティ
Flexコンテナのプロパティだけでなく、個々のFlexアイテムにも詳細な設定が可能です。
5.1. order: アイテムの表示順序
orderプロパティは、Flexアイテムの表示順序を定義します。小さい数値のアイテムほど先に表示され、デフォルト値は0です。負の値も指定できます。
.flex-item {
order: <整数>; /* 例: -1, 0, 1, 2... */
}
5.2. flex-grow: アイテムの拡大比率
flex-growプロパティは、Flexコンテナ内に余剰スペースがある場合に、Flexアイテムがどの程度拡大するかを定義します。デフォルト値は0で、これは拡大しないことを意味します。
.flex-item {
flex-grow: <数値>; /* 例: 0, 1, 2... */
}
例えば、すべてのアイテムのflex-growが1の場合、利用可能な余剰スペースは均等に分配されます。あるアイテムのflex-growが2で、他が1の場合、そのアイテムは他のアイテムの2倍の余剰スペースを獲得します。
5.3. flex-shrink: アイテムの縮小比率
flex-shrinkプロパティは、Flexコンテナ内にスペースが不足している場合に、Flexアイテムがどの程度縮小するかを定義します。デフォルト値は1で、これは必要に応じて縮小することを意味します。0を設定すると、そのアイテムは縮小しません。負の値は無効です。
.flex-item {
flex-shrink: <数値>; /* 例: 0, 1, 2... */
}
すべてのアイテムのflex-shrinkが1の場合、スペース不足の際には均等に縮小します。特定のアイテムにflex-shrink: 0を設定すると、そのアイテムは他のアイテムが縮小しても、元のサイズを維持しようとします。
5.4. align-self: 個別アイテムの交差軸方向の整列
align-selfプロパティは、個々のFlexアイテムにalign-itemsプロパティとは異なる整列方法を適用することを可能にします。これにより、コンテナ全体のalign-items設定を上書きできます。デフォルト値はautoで、これは親のalign-itemsを継承するか、親がない場合はstretchとして扱われます。
.flex-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
各値の動作はalign-itemsプロパティと同じですが、特定のアイテムにのみ適用されます。