CSS align-content プロパティの使用方法の詳細な図による説明

ほとんどのフロントエンド作業者は、一般的に使用されるいくつかの CSS プロパティに精通しているはずです。そこで、今日は少し珍しい CSS プロパティについて話しましょう。CSS align-content プロパティの使用方法をご存知ですか? align-contentの属性値は何ですか? 知りたい友達は、以下を読み続けてください。

1. CSS align-content 属性の定義と使用法

定義: align-content 属性は、フレキシブル コンテナーの交差軸上のすべての使用可能な項目を占有するわけではありません。コンテナ内でアイテムを (垂直に) 整列させるためのスペース。

機能: フリーボックス内の各アイテムの縦方向の配置を設定します。

条件: この属性の設定が有効になるように、属性 display:flex が親要素に設定され、行の折り返しが flex-wrap:wrap に設定されている必要があります。

Setting: この属性はコンテナ内の項目に影響するため、親要素に設定するだけです。

align-content の値は、使用時に必要に応じて設定できます。

stretch: コンテナに合わせて引き伸ばされます (デフォルト)。
center: コンテナの中央に位置します。
flex-start: コンテナの先頭にあります。
flex-end: コンテナの最後にあります。
space-between: 行間に空白があるコンテナ内に配置されます。
space-around: 各行の前後に空白があるコンテナ内に配置されます。

書き込み: align-content:stretch|center|flex-start|flex-end|space-between|space-around

2. align-content インスタンスの分析

説明: 外側の div 内に 4 つの小さな div があり、効果を明確に確認するには、それに異なる色を設定してから、大きな div に align-content: center;
を追加します。内部の div はコンテナー内で垂直方向の中央に配置できます。コードは次のとおりです。

HTML 部分:

<div class="box">
    <div style="background-color:red;"></div>
     <div style="background-color:orange;"></div>
     <div style="background-color:yellow;"></div>
     <div style="background-color:green;"></div>
  </div>

CSS 部分:

.box {
      width: 100px;
      height: 300px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      align-content: center;
  } 
  .box div {
      width: 100px;
      height: 50px;
  }

レンダリング:

概要: 親要素に align-content: center を設定すると、その中の要素がコンテナ内で垂直方向の中央に配置されることが一目瞭然です。他の効果については説明しません。ここで自分で試してみて、特に初心者はもっと練習する必要があるかどうかを確認してください。

以上がCSS align-content プロパティの使用方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。