新着!私の44ページの電子書籍「44分で学ぶCSS」が発売されました! 😃

今すぐ入手 →

#align-content

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

デフォルト align-content: stretch;

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

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

  • 1行目は100pxの高さです。
  • 2行目は50pxの高さです。
  • 残りのスペースは150pxです。

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

  • 1行目の高さは175pxになります。
  • 2行目の高さは125pxになります。

align-content: flex-start;

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

align-content: flex-end;

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

align-content: center;

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

align-content: space-between;

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

align-content: space-around;

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