flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウト

Flex は Flexible Box の略で、「柔軟なレイアウト」を意味します。ボックス モデルに最大限の柔軟性を提供し、コンテナー内の要素 (アイテム) の配置を自由に操作するために使用されます。

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

。箱{ 
      ディスプレイ: フレックス;
 }

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

 。箱{  
      ディスプレイ: インラインフレックス; 
  }

Webkit ベースのブラウザには -webkit プレフィックスが必要です。

。箱{
  display: -webkit-flex; /* Safari */
  ディスプレイ: フレックス;
}

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

コンセプト

Flex レイアウトを使用する要素は、Flex コンテナー、または略して「コンテナー」と呼ばれます。すべての子要素は自動的にコンテナ メンバーになり、Flex アイテム、または略して「アイテム」と呼ばれます。

デフォルトでは、コンテナーには水平の主軸と垂直の交差軸の 2 つの軸があります。主軸の開始位置（境界との交点）を主開始、終了位置を主終了、交差軸の開始位置を交差開始、終了位置を交差終了と呼びます。

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

コンテナのプロパティ

コンテナの6つの特性

• フレックス方向
• フレックスラップ
• フレックスフロー
• コンテンツの正当化
• アイテムを整列させる
• コンテンツの位置揃え

1. flex-direction属性

flex-direction プロパティは、主軸の方向 (つまり、項目が配置される方向) を決定します。

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

可能な値は4です

• 行 (デフォルト): 主軸は水平で、開始点は左端になります。
• row-reverse: 主軸は水平で、開始点は右端にあります。
• 列: 主軸は垂直で、開始点は上端にあります。
• column-reverse: 主軸は垂直で、開始点は下端にあります。

2. flex-wrapプロパティ

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

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

3 つの値を取る場合があります。

(1) nowrap（デフォルト）：改行なし。

(2) wrap：最初の行を上にして折り返します。

（３） wrap-reverse：最初の行を下にして行を折り返します。

3. flex-flow属性

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

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

4. justify-content属性

justify-content プロパティは、項目を主軸上でどのように配置するかを定義します。

。箱 {
    コンテンツの配置: flex-start | flex-end | center |
    間のスペース | 周りのスペース;
} 

5 つの値を取ることができ、具体的な配置は軸の方向によって異なります。以下では、主軸が左から右であると想定しています。

• flex-start（デフォルト）: 左揃え
• flex-end: 右揃え
• 中心：
• space-between: 両端を揃え、項目間の間隔を等しくします。
• space-around: 各項目の両側に等しいスペースが確保されます。したがって、項目間の間隔は、項目と境界線間の間隔の 2 倍になります。

5. align-items属性

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

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

5 つの値を取る場合があります。具体的な位置合わせ方法は交差軸の方向に関係します。以下では交差軸が上から下であると仮定します。

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

6. align-content属性

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

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

この属性は 6 つの値を取ることができます。

• flex-start: 交差軸の開始点に合わせます。
• flex-end: 交差軸の終点に合わせます。
• center: 交差軸の中心点に合わせます。
• space-between: 交差軸の両端に合わせ、軸線間の間隔を均等に分散します。
• space-around: 各軸の両側の間隔は等しくなります。したがって、軸間の距離は、軸と境界間の距離の 2 倍になります。
• ストレッチ (デフォルト): 軸線が交差軸全体を占めます。

参考資料: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

要約する

これで、flex とは何か、flex レイアウト構文の詳細なチュートリアルに関する記事は終了です。flex レイアウト構文の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。