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

云罗郡主
リリース: 2019-01-21 11:56:02
転載
4009 人が閲覧しました

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 コンテナ (フレックス コンテナ) と呼ばれ、「コンテナ」と呼ばれます。そのすべての子要素は自動的にコンテナ メンバーになり、フレックス アイテム (フレックス アイテム)、または略して「アイテム」と呼ばれます。

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

コンテナには、デフォルトで水平主軸 (主軸) と垂直交差軸 (交差軸) の 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 サイトの他の関連記事を参照してください。

ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート