Flexbox - CSSリファレンス

#align-content

Flexbox/Gridコンテナ内で各行がどのように配置されるかを定義します。これは、flex-wrap: wrap が存在し、Flexbox/Gridアイテムに複数行ある場合にのみ適用されます。

デフォルト align-content: stretch;

各行は残りのスペースを埋めるように伸縮します。

この場合、コンテナの高さは300pxです。2番目のボックスの高さが100pxであることを除き、すべてのボックスの高さが50pxです。

最初の行の高さは100pxです
2番目の行の高さは50pxです
残りのスペースは150pxです

この残りのスペースは2つの行に均等に分散されます

最初の行の高さは175pxになります
2番目の行の高さは125pxになります

align-content: flex-start;

各行は必要なスペースのみを占めます。すべてFlexbox/Gridコンテナのクロス軸の先頭に移動します。

align-content: flex-end;

各行は必要なスペースのみを占めます。すべてFlexbox/Gridコンテナのクロス軸の末尾に移動します。

align-content: center;

各行は必要なスペースのみを占めます。すべてFlexbox/Gridコンテナのクロス軸の中央に移動します。

align-content: space-between;

各行は必要なスペースのみを占めます。残りのスペースは行の間に表示されます。

align-content: space-around;

各行は必要なスペースのみを占めます。残りのスペースは行の周囲に均等に分散されます：最初の行の前、2つの行の間、最後の行の後。

#align-items

Flexboxコンテナの行内で、Flexboxアイテムがクロス軸に従ってどのように配置されるかを定義します。

align-items: flex-start;

Flexboxアイテムはクロス軸の先頭に配置されます。

デフォルトでは、クロス軸は垂直方向です。つまり、Flexboxアイテムは上部に垂直に配置されます。

align-items: flex-end;

Flexboxアイテムはクロス軸の末尾に配置されます。

デフォルトでは、クロス軸は垂直方向です。つまり、Flexboxアイテムは下部に垂直に配置されます。

align-items: center;

Flexboxアイテムはクロス軸の中央に配置されます。

デフォルトでは、クロス軸は垂直方向です。つまり、Flexboxアイテムは垂直に中央揃えされます。

align-items: baseline;

Flexboxアイテムはクロス軸のベースラインに配置されます。

デフォルトでは、クロス軸は垂直方向です。つまり、Flexboxアイテムは、テキストのベースラインが水平線に沿って揃うように配置されます。

align-items: stretch;

Flexboxアイテムは全体のクロス軸に伸縮します。

デフォルトでは、クロス軸は垂直方向です。つまり、Flexboxアイテムは垂直方向のスペース全体を埋めます。

#align-self

align-itemsと似ていますが、すべてではなく、単一のFlexboxアイテムのみに適用されます。

デフォルト align-self: auto;

ターゲットはalign-itemsの値を使用します。

align-self: flex-start;

コンテナにalign-items: centerがあり、ターゲットにalign-self: flex-startがある場合、ターゲットのみがクロス軸の先頭に配置されます。

デフォルトでは、これは上部に垂直に配置されることを意味します。

align-self: flex-end;

コンテナにalign-items: centerがあり、ターゲットにalign-self: flex-endがある場合、ターゲットのみがクロス軸の末尾に配置されます。

デフォルトでは、これは下部に垂直に配置されることを意味します。

align-self: center;

コンテナにalign-items: flex-startが設定され、対象要素にalign-self: centerが設定されている場合、対象要素のみがクロス軸の中央に配置されます。

デフォルトでは、これは垂直方向に中央揃えされることを意味します。

align-self: baseline;

コンテナにalign-items: centerが設定され、対象要素にalign-self: baselineが設定されている場合、対象要素のみがクロス軸のベースラインに配置されます。

デフォルトでは、これはテキストのベースラインに揃えられることを意味します。

align-self: stretch;

コンテナにalign-items: centerが設定され、対象要素にalign-self: stretchが設定されている場合、対象要素のみがクロス軸全体に伸縮します。

#flex-basis

フレックスボックスアイテムの初期サイズを定義します。

デフォルト flex-basis: auto;

要素は、コンテンツに基づいて、またはheightやwidthの値が定義されている場合はそれらの値に基づいて、自動的にサイズが調整されます。

flex-basis: 80px;

ピクセルまたは(r)emの値を定義できます。要素は、オーバーフローを防ぐためにコンテンツを折り返します。

#flex-direction

フレックスボックスコンテナ内でフレックスボックスアイテムがどのように配置されるかを定義します。

デフォルト flex-direction: row;

フレックスボックスアイテムは、テキストの方向と同じように、メイン軸に沿って配置されます。

flex-direction: row-reverse;

フレックスボックスアイテムは、テキストの方向とは逆に、メイン軸に沿って配置されます。

flex-direction: column;

フレックスボックスアイテムは、テキストの方向と同じように、クロス軸に沿って配置されます。

flex-direction: column-reverse;

フレックスボックスアイテムは、テキストの方向とは逆に、クロス軸に沿って配置されます。

#flex-flow

flex-directionとflex-wrapの簡略記法プロパティです。

#flex-grow

空きスペースがある場合、フレックスボックスアイテムがどれだけ拡大するべきかを定義します。

デフォルト flex-grow: 0;

空きスペースがあっても要素は拡大しません。必要なスペースのみを使用します。

flex-grow: 1;

要素は1の係数で拡大します。他のフレックスボックスアイテムにflex-growの値が設定されていない場合、残りのスペースをすべて埋めます。

flex-grow: 2;

flex-growの値は相対的であるため、その動作はフレックスボックスアイテムの兄弟要素の値に依存します。

この例では、残りのスペースは3分割されます。

1/3は緑のアイテムに割り当てられます。
2/3はピンクのアイテムに割り当てられます。
黄色のアイテムには何も割り当てられず、初期の幅を維持します。

#flex-shrink

空きスペースが不足している場合、フレックスボックスアイテムがどれだけ縮小するべきかを定義します。

デフォルト flex-shrink: 1;

コンテナのメイン軸に空きスペースが不足している場合、要素は1の係数で縮小し、コンテンツを折り返します。

flex-shrink: 0;

要素は縮小しません。必要な幅を維持し、コンテンツを折り返しません。兄弟要素が縮小して対象要素にスペースを譲ります。

対象要素はコンテンツを折り返さないため、フレックスボックスコンテナのコンテンツがオーバーフローする可能性があります。

flex-shrink: 2;

flex-shrinkの値は相対的であるため、その動作はフレックスボックスアイテムの兄弟要素の値に依存します。

この例では、緑のアイテムは幅の100％を占めようとしています。必要なスペースは2つの兄弟要素から取得され、4分割されます。

3/4は赤のアイテムから取得されます。
1/4は黄色のアイテムから取得されます。

#flex-wrap

フレックスボックスアイテムがフレックスボックスコンテナ内で1行に表示されるか、複数行に表示されるかを定義します。

デフォルト flex-wrap: nowrap;

フレックスボックスアイテムはどのような場合でも1行に残り、必要に応じて最終的にオーバーフローします。

flex-wrap: wrap;

フレックスボックスアイテムは必要に応じて複数行に配置されます。

flex-wrap: wrap-reverse;

フレックスボックスアイテムは必要に応じて複数行に配置されます。追加の行は前の行の前に表示されます。

#justify-content

フレックスボックス/グリッドコンテナ内で、フレックスボックス/グリッドアイテムがメイン軸に合わせてどのように配置されるかを定義します。

デフォルト justify-content: flex-start;

フレックスボックス/グリッドアイテムは、コンテナのメイン軸の先頭に寄せられます。

justify-content: flex-end;

フレックスボックス/グリッドアイテムは、コンテナのメイン軸の末尾に寄せられます。

justify-content: center;

フレックスボックス/グリッドアイテムは、コンテナのメイン軸に沿って中央揃えされます。

justify-content: space-between;

残りのスペースはフレックスボックス/グリッドアイテムの間に均等に配置されます。

justify-content: space-around;

残りのスペースはフレックスボックス/グリッドアイテムの周囲に均等に配置されます。これにより、最初のアイテムの前と最後のアイテムの後にスペースが追加されます。

#order

フレックスボックスアイテムの順序を定義します。

デフォルト order: 0;

フレックスボックスアイテムの順序は、HTMLコードで定義された順序です。

order: 1;

順序はフレックスボックスアイテムの兄弟要素に対して相対的です。最終的な順序は、すべての個々のフレックスボックスアイテムのorder値が考慮されたときに決定されます。

order: -1;

負の値を使用できます。

order: 9;

各フレックスボックスアイテムに異なる値を設定できます。