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

align-content と align-items の区別

フレックスボックスの領域内では、align-content と align-items の両方が重要です要素のレイアウトを整理する際に。ただし、それぞれの役割は異なります。

align-items

justify-content と同様に、align-items は、フレックス コンテナ内の項目の配置を制御します。交差軸。デフォルトでは、align-items は水平方向のコンテナ (flex-direction: row) では垂直軸に沿って配置され、垂直方向のコンテナではその逆になります。

gt;align-content

align-items とは異なり、align-content は、フレックス コンテナー内に複数行の要素がある場合に有効になります。これは、個々の項目ではなく、要素の配置全体の配置に影響します。

これらの違いを次に示します:

align-items: center

これにより、変化に関係なく、単一行内の項目が中央で垂直に整列するようになります。 heights.

align-content: space-around

これにより、行が垂直方向に均等に配置され、複数行の要素を扱うときにより調和のとれた間隔が可能になります。

また、align-content: space-around と align-items: center を組み合わせると、最後の行は垂直方向の中央に配置されます。

インタラクティブな CodePen デモでこれらの概念をさらに詳しく調べてください:

[CodePen 1](https://codepen.io/asim-coder/pen/MKQWbb)
[コードペン] 2](https://codepen.io/asim-coder/pen/WrMNWR)

フレックスボックスを包括的に理解するには、この没入型 CodePen をチェックしてください:

[Flexbox Playground](https ://codepen.io/chrisgraham/pen/PYYBBG)

以上がFlexbox の `align-items` と `align-content` の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。