CSS Flex レイアウト (伸縮自在なレイアウト) のプロパティは何ですか? CSS Flex レイアウト プロパティの概要

この記事では、CSS Flex Layout (Elastic Layout) のプロパティについて説明します。 CSS Flex レイアウト プロパティの紹介は、必要な友人が参考になれば幸いです。

Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、箱型のモデルに最大限の柔軟性を提供するために使用されます。任意のコンテナを Flex レイアウトとして指定できます。
注: Flex レイアウトに設定すると、子要素の float、clear、vertical-align 属性は無効になります。

基本概念

Flexレイアウトを使用した要素はFlexコンテナ（フレックスコンテナ）と呼ばれ、「コンテナ」と呼ばれます。そのすべての子要素は自動的に、「アイテム」と呼ばれる Flex アイテム (フレックス アイテム) と呼ばれるコンテナ メンバーになります。
コンテナにはデフォルトで 2 つの軸があります: 水平主軸 (メイン軸) と垂直クロス軸 (クロス軸) です。主軸の開始位置（境界線との交点）をメインスタート、終了位置をメインエンド、交差軸の開始位置をクロススタート、終了位置をクロスエンドといいます。

コンテナのプロパティ

1. CSS flex-direction

flex-direction プロパティは主軸の方向 (つまり、項目の配置方向) を決定します
flex-direction: row | row-reverse |列 | 列 - 逆
行 (デフォルト): 主軸は水平で、開始点は左側にあります。
row-reverse: 主軸は水平であり、開始点は右端にあります。
列: 主軸は垂直で、始点は上端にあります。
column-reverse: 主軸は垂直であり、開始点は下端にあります。

2. CSS flex-wrap (行の折り返し)

flex-wrap デフォルトでは、項目は行 (「軸」とも呼ばれます) 上に配置されます。 flex-wrap 属性は、1 つの軸が収まらない場合にラップする方法を定義します。
nowrap (デフォルト): 行の折り返しなし。
。
ラップ-リバース: ラップ、最初の行は以下です。

3. css flex-flow

flex-flow 属性は、flex-direction 属性と flex-wrap 属性の略称です。デフォルト値は row nowrap です。

flex-flow: || ;

4. justify-content

justify-content プロパティは、主軸上の項目の配置を定義します。

justify-content: flex-start | space-around |
flex-start (デフォルト): 左揃え
center: 中央揃え
space-around ：両端に揃えてアイテムを等間隔に配置します。
周囲のスペース: 各アイテムの両側のスペースは等しいです。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。

5. align-items

align-items 属性は、項目を交差軸上でどのように配置するかを定義します。

align-items: flex-start | flex-end | ベースライン | ストレッチ;

flex-start: 交差軸の開始点を揃えます。
フレックスエンド: 交差軸の終点を揃えます。
中心: 十字軸の中点を揃えます。
ベースライン: アイテムのテキストの最初の行のベースライン配置。
ストレッチ (デフォルト値): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占めます。

6. align-content

align-content 属性は、複数の軸の配置を定義します。項目に軸が 1 つしかない場合、このプロパティは効果がありません。交差軸。

フレックスエンド: 交差軸の終点に位置合わせされます。

中心: 交差軸の中点に位置合わせされます。
間隔: 交差軸の両端に合わせて、軸間の間隔が均等になります。
周囲の間隔: 各軸の両側の間隔は等しいです。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。
ストレッチ (デフォルト値): 軸は交差軸全体を占めます。



アイテム属性

1. order

order属性はアイテムの順序を定義します。値が小さいほど順位が高くなります。デフォルトは 0 です。

2、CSS flex-grow

flex-grow 属性は項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。
すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。 1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。
*2 点レイアウトと 3 点レイアウトの実装に使用できます

3. CSS flex-shrink

flex-shrink 属性は、アイテムの収縮率を定義します。つまり、存在する場合です。スペースが不十分な場合、アイテムは縮みます。
すべての項目のフレックスシュリンクプロパティが 1 の場合、スペースが不足すると、すべての項目が比例して縮小されます。 1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不十分な場合、前者は縮小されません。
このプロパティには負の値は無効です。

4. CSS flex-basis

flex-basis プロパティは、余分なスペースを割り当てる前に、項目が占める主軸のスペース (メイン サイズ) を定義します。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。
幅または高さの属性と同じ値 (350px など) に設定でき、その場合、アイテムは固定スペースを占有します。

5. css flex

flex プロパティは、flex-grow、flex-shrink、flex-basis の略称で、デフォルト値は 0 1 auto です。最後の 2 つのプロパティはオプションです。
この属性には 2 つのショートカット値があります: auto (1 1 auto) と none (0 0 auto)。
ブラウザーが関連する値を推測するため、3 つの個別の属性を個別に記述するのではなく、この属性を最初に使用することをお勧めします。

6. align-self

align-self 属性を使用すると、単一の項目に他の項目とは異なる配置を指定でき、align-items 属性をオーバーライドできます。デフォルト値は auto で、親要素がない場合は、親要素の align-items 属性を継承します。

関連する推奨事項:

CSS古いバージョンflexと互換性_html/css_WEB-ITnose

CSS Flex-boxサンプルコード_html/css_WEB-ITnose

CSS フレキシブルボックスモデルflexレイアウト内のアプリケーション

以上がCSS Flex レイアウト (伸縮自在なレイアウト) のプロパティは何ですか? CSS Flex レイアウト プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。