CSS align-content プロパティの使用方法の詳細な図による説明-CSSチュートリアル-php.cn

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

yulia

リリース： 2018-09-14 13:46:07

オリジナル

5328 人が閲覧しました

ほとんどのフロントエンド作業者は、一般的に使用されるいくつかの 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: 各行の前後に空白があるコンテナ内に配置されます。

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;
  }

ログイン後にコピー

レンダリング:

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