フレックスボックス: 「align-items」と「align-content」の違いは何ですか?

フレックスボックス: align-content と align-items の違いを理解する

フレックスボックスのレイアウトに関しては、align-items と align-コンテンツ プロパティは、フレックス内でコンテンツを調整する際の明確な目的を果たします。 containers.

align-items

align-items は、フレックス コンテナーの交差軸に沿って要素を配置します。この交差軸は、フレックス方向プロパティによって決定される主軸の方向に対して垂直です。デフォルトでは、flex-direction: row なので、メイン軸は水平、クロス軸は垂直です。

align-items には、要素を垂直方向に整列させるためのさまざまな値 (開始、終了、中心、ストレッチ、およびbaseline.

align-content

対照的に、align-content は、要素内の要素の行を揃えます。複数行のフレックスコンテナ。要素が 1 行しかない場合、align-content は効果がありません。このプロパティは、コンテナーの幅が制限されているために複数の行が形成される場合に有効になります。

align-content にはさまざまな値もあります。

• flex-start: 要素の行が上部に揃えられます。それらを含むスペースの
• flex-end: 要素の行がそれらを含むスペースの下部に整列します
• center: 要素の行が整列します含まれる空間の中心に垂直方向に配置
• space-between: 要素の行が垂直軸に沿って均等に配置され、要素の間に隙間があります
• space-around: 要素の行が垂直軸に沿って均等に配置されます前後に隙間があるそれら

例

次のコードを考えてみましょう:

.container {
  display: flex;
  flex-direction: row;
}

.item {
  align-items: center;
  align-content: space-around;
}

この例では、align-items: center で子要素が配置されます。それがアイテムである、収容スペースの中央に垂直に配置されます。 align-content: space-around は、要素の行を垂直方向に整列させ、要素の間と後に隙間を設けます。結果は、各行間に隙間のある、垂直方向に中央に配置された要素の行になります。

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