align-content と align-items を比較してください。どのような違いがあるのでしょうか?

Question

align-items と align-content の違いは何ですか?

Answer 1

flex-box の align-items プロパティは、justify-content が主軸に沿って整列するのと同様に、Flex コンテナ内の項目を水平軸に沿って整列します。 (デフォルトの flex-direction: row では、交差軸が垂直方向に対応し、主軸が水平方向に対応します。 flex-direction: column を使用する場合、これら 2 つは、軸は個別に互いに位置合わせできます。変更)。

次に、align-items:center の例を示します:

ただし、align-content は複数行のフレックスボックスでも機能します。アイテムが連続している場合は効果がありません。その値に従って構造全体を調整します。 align-content: space-around; の例を次に示します。

これは、 align-content: space-around; と align-items:center の例です:

最初の行の 3 番目のボックスと他のすべてのボックスが、その行の垂直方向の中央に配置されるように変更されていることに注目してください。

使用できるコードペンのリンクをいくつか示します:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

これは 非常にクールなペンで、Flexbox 内のほぼすべてのものを表示して使用できるようにします。