CSS3 弾性拡張ボックスの詳細な説明

使用

• フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、モバイル端末でも同様です。フレキシブル ボックスの使い方を習得することは、現在、適応型ページを作成する上で非常に重要です。このレイアウトルールを習得することは必須のスキルです。
  

弾性ボックスモデルの説明

• 主軸は、フレックス アイテムが配置される方向 (ページ上の水平行、垂直列など) に沿って走る軸です。この軸の始点と終点は、主始点と主終点と呼ばれます**。
• 交差軸は、フレックス アイテムが配置される方向に対して垂直な軸です。軸の始点と終点はクロス スタートとクロス エンド** と呼ばれます。
• display: flex が設定されている親要素 (この場合は <section> ) は、フレックス コンテナーと呼ばれます。
• フレックス コンテナー内でフレキシブル ボックスとして動作する要素は、フレックス アイテムと呼ばれます。
  

よく使われるプロパティ

flex-direction (フレキシブルコンテナ内のサブ要素の配置を指定します)

   行のデフォルト値。要素は行として水平に表示されます。
   row-reverse 逆の順序。
   列要素は列として垂直に表示されます。
   column-reverse 列と同じですが、順序が逆になります。

flex-wrap (このプロパティは、フレックス コンテナーが 1 行か複数行かを指定し、交差軸の方向によって新しい行が積み重ねられる方向が決まります。)

  nowrap のデフォルト値。要素を行または列に分割しないことを指定します。
  wrap は、必要に応じて要素を行または列に分割することを指定します。
  wrap-reverse は、必要に応じて要素が行または列内で逆の順序で折り返されることを指定します。

align-items プロパティは、フレックス コンテナーの現在の行の垂直軸方向におけるフレックス アイテムの配置を定義します。つまり、上行と下行のスタイルを指定します。

   ストレッチ デフォルト値。アイテムはコンテナに収まるように引き伸ばされます。
   center アイテムはコンテナの中央に配置されます。
   flex-start 項目はコンテナーの先頭に配置されます。
   flex-end アイテムはコンテナーの最後に配置されます。
   ベースライン アイテムはコンテナのベースラインに配置されます。

justify-content は、フレキシブル ボックス要素の主軸 (交差軸) 方向の配置を設定または取得するために使用されます。

  flex-start 項目はコンテナーの先頭に配置されます。
  flex-end アイテムはコンテナーの最後に配置されます。
  center アイテムはコンテナの中央に配置されます。
  space-between 項目は、行間にスペースを空けてコンテナ内に配置されます。
  space-around 項目は、各行の前、行間、行の後にスペースを置いてコンテナー内に配置されます。

柔軟な子要素のプロパティ

1.order属性

.flex-container .flex-item { order: <整数>; }

<integer>: 整数値を使用してソート順序を定義します。値が小さいほど先頭になります。負の値も指定できます。デフォルトは 0 です。

2.align-self は、弾性ボックス要素自体の交差軸（垂直軸）方向の配置を設定または取得します。 (align-items と同様)

以上がCSS3エラスティック拡張ボックスの詳しい説明です。CSS3エラスティック拡張ボックスの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。