検索

ホームページ  >  に質問  >  本文

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

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

P粉904405941P粉904405941488日前681

全員に返信(1)返信します

  • P粉854119263

    P粉8541192632023-10-14 13:53:24

    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< /p>

    http://codepen.io/asim-coder/pen/WrMNWR< /p>

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

    返事
    0
  • キャンセル返事