CSS3 Flex エラスティックレイアウトのサンプルコードの詳細な説明

1. 基本概念

 //任意のコンテナを Flex レイアウトとして指定できます。
 。箱{
   ディスプレイ: フレックス;
 }
 //インライン要素でも Flex レイアウトを使用できます。
 。箱{
   ディスプレイ: インラインフレックス;
 }
 //Flex レイアウトに設定すると、子要素の float、clear、vertical-align 属性が無効になることに注意してください。

2. コンテナのプロパティ

1. フレックス方向

flex-directionはアイテムの配置方向を決定します

 。箱 {
   flex-direction: 行 | 行反転 | 列 | 列反転;
 }

2. フレックスラップ

デフォルトでは、アイテムは線（「軸」とも呼ばれます）上に配置されます。 flex-wrap プロパティは、1 つの軸が収まらない場合に折り返す方法を定義します。

 。箱{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

3. フレックスフロー

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

 。箱 {
   flex-flow: <flex-direction> || <flex-wrap>;
 }

4. コンテンツの正当化

justify-content プロパティは、項目を水平方向に配置する方法を定義します。

 。箱 {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

5. アイテムの位置揃え

align-item プロパティは、項目の垂直方向の配置を定義します。

 。箱 {
   align-items: flex-start | flex-end | center | baseline | Stretch;
 }

3.6 align-contentプロパティ

align-content プロパティは、複数の軸の配置を定義します。プロジェクトにグリッド ラインが 1 つしかない場合、このプロパティは効果がありません。

 。箱 {
   align-content: flex-start | flex-end | center | space-between | space-around | Stretch;
 }

3. プロジェクトの属性

1. 注文

order 属性は、項目を並べ替える順序を定義します。値が小さいほど、順位が高くなります。デフォルト値は 0 です。

 。アイテム {
   順序: <整数>;
 }

2. フレックスグロー

flex-grow 属性は、アイテムの拡大率を定義します。デフォルト値は 0 で、残りのスペースがある場合は拡大されないことを意味します。

 。アイテム {
   flex-grow: <number>; /* デフォルト 0 */
 }
 // すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (ある場合) が均等に分割されます。 1 つのアイテムの flex-grow プロパティが 2 で、他のアイテムの flex-grow プロパティが 1 の場合、前者は他のアイテムの 2 倍のスペースを占めることになります。

3. フレックスシュリンク

flex-shrink プロパティは、アイテムの縮小率を定義します。デフォルト値は 1 で、十分なスペースがない場合、アイテムは縮小されます。

 。アイテム {
   flex-shrink: <number>; /* デフォルト 1 */
 }

4. フレックスベース

flex-basis プロパティは、追加のスペースが配分される前にアイテムが占める主なサイズを定義します。ブラウザはこのプロパティを使用して、主軸上に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、プロジェクトの元のサイズになります。

 。アイテム {
   flex-basis: <長さ> | auto; /* デフォルトは auto */
 }
 /* 幅または高さ属性と同じ値 (350px など) に設定すると、アイテムは固定のスペースを占有します。 */

4.5 フレックスプロパティ

flex プロパティは、flex-grow、flex-shrink、flex-basis の略語です。デフォルト値は 0 1 auto です。最後の 2 つの属性はオプションです。

    。アイテム {
      flex: なし | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

このプロパティには、auto (1 1 auto) と none (0 0 auto) の 2 つのショートカット値があります。

4.6 align-selfプロパティ

align-self プロパティを使用すると、align-items プロパティをオーバーライドして、個々の項目を他の項目とは異なる位置に配置することが可能になります。デフォルト値は auto で、親要素の align-items プロパティを継承することを意味します。親要素がない場合、stretch と同等になります。 align-itemsと同等

 。アイテム {
   align-self: auto | flex-start | flex-end | center | baseline | Stretch;
 }

要約する

上記は、エディターが紹介した CSS3 Flex エラスティック レイアウトのサンプル コードの詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。