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

Question

flex-boxプロパティは、主軸とalign-items同様に、フレックスコンテナー内のアイテムを交差軸に沿って配置します。(デフォルトでは、交差軸は垂直に対応し、主軸は水平に対応します。これら 2 つはそれぞれ交換されます)。justify-contentflex-direction: rowflex-direction: column

見た目の例は次のようになりますalign-items:center。

しかし、align-content複数行のフレキシブルボックス用です。項目が 1 行にある場合は効果がありません。値に応じて構造全体を配置します。次に例を示しますalign-content: space-around;。

align-content: space-around;見た目は次のようになりますalign-items:center。

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

以下に、試してみるための codepen リンクをいくつか示します。

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

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

こちらはFlexbox 内のほぼすべてのものを表示して操作できる、非常にクールなペンです。

Answer 1