フレックスの特徴は何ですか？

flex の属性は次のとおりです: 1. flex-direction、主軸の方向を設定します; 2. justify-content、主軸上のサブ要素の配置を設定します; 3. flex-wrap、サブ要素を折り返すかどうかを設定します; 4. 、align-content、横軸上のすべてのサブ要素の配置を設定します; 5. align-items: 横軸上のサブ要素の配置を設定します。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

flexの属性:

1.flex-direction

主軸の方向を設定します

属性値の説明

行のデフォルト値を左から右へ

行を左から右へ反転

列を上から下へ

列を上から下へ反転

2. justify-content

主軸上の子要素の配置を設定します

justify-content 属性は、主軸上の項目の配置を定義します。 main axis

注: この属性を使用する前に、どの主軸が

属性値の説明

flex-start のデフォルト値であるかを確認してください (先頭から開始する場合)。主軸が X 軸、左から右へ）

flex-end 末尾から配置

center 主軸の中心に揃えます（主軸が X 軸の場合） X 軸、水平方向の中心）

space-around 残りのスペースを均等に分割します

space-between まず両側をウェルトしてから、残りのスペースを均等に分割します (重要)

3. flex-wrap

サブ要素をラップするかどうかを設定します

デフォルトでは、項目は線 (「軸」とも呼ばれます) 上に配置されます。 flex-wrap 属性定義、フレックス レイアウトのデフォルトは行折り返しなしです

属性値の説明

nowrap のデフォルト値、行折り返しなし

行折り返しをラップ

4. align-content

横軸上のサブ要素の配置を設定(複数行)

属性値の説明

flex -start デフォルト値、交差軸の先頭から配置開始

flex-end 交差軸の最後尾から配置開始

center 交差軸の中央に表示

space-around 側面の子 軸が残りのスペースを二分します

space-between.まず子がサイド軸の両端に配置され、次に残りのスペースを均等に分割します

stretch 親要素の高さを二等分するように子要素の高さを設定します。 align-items: 横軸を設定します。 横軸上の子要素の配置 (1 行)

## 5、align-items

横軸上の子要素の配置を設定します（単一行）

プロパティ値の説明

flex-start デフォルト値、から上から下へ

フレックスエンド下から上へ

中央を絞って中央（垂直中央）

ストレッチストレッチ

6、 flex-flowflex-direction プロパティと flex-wrap プロパティの複合プロパティ

プロパティ値の説明

flex: サブ項目の割合

align -self: 自身の側のサブアイテムの配置を制御します axis

order: 属性はサブアイテムの順序 (前後) を定義します order)

以上がフレックスの特徴は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。