CSS3 の Flex レイアウトの詳細な分析

Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供することを目的としています。コンテナのサイズが不明な場合や動的に変化する場合でも同様です。

Flex レイアウトの基本的な考え方は、コンテナーがアイテムの幅/高さ (および順序) を変更して、使用可能なスペースを最適に埋められるようにすることです (主に、さまざまな表示デバイスと画面サイズに対応するため)。フレックス コンテナーは、使用可能な空き領域を埋めるためにアイテムを拡張したり、オーバーフローを防ぐためにアイテムを縮小したりします。

最も重要なのは、フレックスボックス レイアウトは通常のレイアウト (垂直方向はブロックベースのレイアウト、水平方向はインラインベースのレイアウト) と比較して方向に依存しないことです。 これらはページには適していますが、大規模または複雑なアプリケーション (特に向きの変更、サイズ変更、拡大、縮小など) をサポートする柔軟性に欠けています。

原理

flexbox は単一のプロパティではなくモジュール全体であるため、プロパティのセット全体を含む多くのものが含まれます。 これらの一部はコンテナー (親要素、"フレックス コンテナー" と呼ばれます) に設定され、その他は子要素 ("フレックス アイテム" と呼ばれます) に設定されます。 「通常」レイアウトがブロックフロー方向とインラインフロー方向に基づいている場合、フレックスレイアウトは「フレックスフロー方向」に基づいています。 フレックス レイアウトの基本的な考え方を説明する仕様のこの図をご覧ください。

アイテムは、主軸 (主開始点から主終了点まで) または交差軸 (交差開始点から交差終了点まで) に沿ってレイアウトされます。

main-axis: フレックス コンテナーの主軸は、フレックス アイテム レイアウトの主軸です。 必ずしも水平であるとは限らず、flex-direction プロパティによって決まることに注意してください。

main-start、main-end: main-startからmain-endまで、フレックスアイテムがコンテナ内に配置されます。

main-size: フレックスアイテムの幅または高さはメインサイズに基づきます。フレックス アイテムの主な寸法プロパティは、「幅」または「高さ」のいずれか大きい方になります。

交差軸: 主軸に垂直な軸を交差軸と呼びます。その方向は主軸の方向に依存する

クロススタート | クロスエンド: 弾性ラインにアイテムが詰められ、クロススタートからクロスエンドまでコンテナ内に配置されます。

クロスサイズ: フレックスアイテムの幅または高さ。どちらのクロスサイズが使用されるかによって、アイテムのクロスサイズが決まります。クロス サイズ属性は、クロス サイズの「幅」または「高さ」のいずれかです。

親プロパティ（フレックスコンテナ）

1. フレックス方向

flex-direction は主軸方向、つまりフレックスアイテムが配置される方向を決定します。デフォルトの行方向に加えて、フレックスアイテムは垂直方向または逆方向に配置することもできます (row-reverse/column-reverse)

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

css:

.flex-コンテナ{
  ディスプレイ: フレックス;
  flex-direction: 行;
}

効果：

2. フレックスラップ

ウィンドウが狭くなったときにフレックスアイテムを圧縮したくないが、境界を越えたフレックスアイテムを折り返したい場合は、フレックスコンテナのflex-wrapを設定することができます。

。容器{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

css:

.flex-コンテナ{
  ディスプレイ: フレックス;
  flex-wrap: ラップ;
}

効果: ページが小さくなると折り返されます

3. フレックスフロー

flex-directionとflex-wrapは、flex-flowという1つのプロパティに組み合わせることができます。例: flex-flow: row-reverse wrap

4. コンテンツを正当化する

これは主軸に沿った配置を定義します。 これは、行内のすべてのフレックス項目が柔軟でない場合、または柔軟だが最大サイズに達している場合に、残っている余分な空き領域を分配するのに役立ちます。 また、アイテムが行から溢れた場合の配置も制御できます。

。容器 {
  コンテンツの正当化: 
flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
} 

css:

.flex-コンテナ{
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
}

効果：

5. アイテムの位置揃え

フレックス方向の中央揃えが実現された後、align-items を使用して主軸に対して垂直な中央揃えを実現できます。

。容器 {
  align-items: ストレッチ | flex-start | flex-end | 中央 | ベースライン | 最初のベースライン | 最後のベースライン | 開始 | 終了
} 

css:

.flex-コンテナ{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

効果：

6. コンテンツの配置

複数の行がある場合、フレックス コンテナーの行は、メイン軸内の個々の項目のコンテンツ配置が調整されるのと同様に、内部的に配置されます。 flex に行が 1 つしかない場合は機能しません。

。容器 {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | Stretch | start | end | baseline | 最初のベースライン | 最後のベースライン
} 

サブクラス属性（フレックスアイテム）

1. 注文

デフォルトでは、フレックス アイテムはソースの順序でレイアウトされます。 ただし、順序プロパティは、フレックス コンテナー内に表示される順序を制御します。

css:

。1つ {
  注文: 3
}

。二 {
  注文: 1
}

。三つ {
  注文: 2
}

効果：

2. フレックスグロー

上記のすべての例では、3 つのフレックス アイテムはフレックス コンテナーの小さな部分のみを占めています。フレックス アイテムでフレックス コンテナーを埋め尽くしたい場合は、フレックス アイテムに flex-grow 属性を設定する必要があります。名前が示すように、grow は成長を意味し、フレックス アイテムのサイズの拡張を制御するために使用されます。

css:

。1つ {
 フレックス成長: 2;
}

。二 {
  フレックス成長: 8;
}

。三つ {
  フレックス成長: 2;
}

効果：

要点

• flex-grow が負の数の場合、無効になります。
• 各アイテムに割り当てられる余分なスペースは、flex-grow の比率に従って分割されるのではなく、各アイテム自体の幅 * それぞれの flex-grow の結果の比率に従って分割されます。自分でテストしました! ！ ！

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

flex-grow の反対は flex-shrink で、サブ要素のサイズが flex コンテナーを超えた後にサブ要素の圧縮を制御するために使用されます。要点:

flex-shrinkは負の数の場合は無効です4。flex-basis

これは、残りのスペースが割り当てられる前の要素のデフォルト サイズを定義します。

.flex-item {
  flex-basis: <長さ> | auto; /* デフォルトは auto */
}

auto キーワードは、「自身の幅または高さの属性を確認する」ことを意味します。

5. フレックス

これは、flex-grow、flex-shrink、flex-basis の組み合わせの略です。 2 番目と 3 番目のパラメータ (stretch と StretchBase) はオプションです。個々のプロパティを設定する代わりに、このショートカット プロパティを使用することをお勧めします。

.flex-item {
  flex: なし | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. 整列

これにより、個々のフレックス アイテムのデフォルトの配置 (または align-items によって指定された配置) を上書きできます。

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

css:

.flex-コンテナ{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

。1つ {
  align-self:flex-end;
}

効果：

CSS3 の Flex レイアウトの詳細な分析に関するこの記事はこれで終わりです。CSS Flex レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。