WeChat ミニ プログラム - フレックス レイアウトとは何ですか?

Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、箱型モデルに最大限の柔軟性を提供するために使用されます。 [推奨チュートリアル: 小さなプログラム開発チュートリアル ]

任意のコンテナを Flex レイアウトとして指定できます。

.box{ display: flex; }

インライン要素でも Flex レイアウトを使用できます。

.box{ display: inline-flex; }

Webkit コアを搭載したブラウザでは、-webkit プレフィックスを追加する必要があります。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

Flex レイアウトに設定すると、子要素の float、clear、vertical-align 属性が無効になることに注意してください。

Flex の基本概念
Flex レイアウトを採用した要素は Flex コンテナ (フレックス コンテナ) と呼ばれ、「コンテナ」と呼ばれます。そのすべての子要素は自動的にコンテナ メンバーになり、フレックス アイテム (フレックス アイテム)、または略して「アイテム」と呼ばれます。

コンテナには、デフォルトで水平主軸 (主軸) と垂直交差軸 (交差軸) の 2 つの軸があります。主軸の開始位置（境界線との交点）をメインスタート、終了位置をメインエンド、交差軸の開始位置をクロススタート、終了位置をクロスエンドといいます。

項目はデフォルトで主軸に沿って配置されます。 1 つのアイテムが占める主軸のスペースをメイン サイズと呼び、1 つのアイテムが占める横軸のスペースをクロス サイズと呼びます。

コンテナのプロパティ

 flex-direction: このプロパティは、主軸の方向 (つまり、項目の配置方向) を決定します。 (左、中、右、上、中、下)

 flex-wrap: 軸線が1本配置できない場合に線を折り返す方法を属性定義。

 flex-flow: flex-direction プロパティと flex-wrap プロパティの短縮形。デフォルト値は row nowrap です。

 justify-content: このプロパティは、行の配置を定義します。主軸上の項目。 (左、中央、右)

 align-items: 項目を交差軸上にどのように配置するかを定義するプロパティです。 (上、中、下)

 align-content: この属性は複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。

以上がWeChat ミニ プログラム - フレックス レイアウトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。