CSS でのフレックスレイアウトの詳細な説明

フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レイアウトとして指定できます。

フレキシブルボックスを宣言するいくつかの方法

前述のように、すべてのコンテナはフレックスレイアウトとして指定できます。

.box{ ディスプレイ:flex;}

インライン要素も使用できます。

ディスプレイ:インラインフレックス;

フレックス要素の方向を変更する

弾性ボックスのデフォルトの方向は左から右です。軸は水平です。flex flex-directionのデフォルトの属性はrow

.box{ ディスプレイ:flex;}

flex-directionを変更することができます

配置方向を変更する属性、つまり軸を垂直方向に変更する属性

.box{ display:flex; flex-deriction:column;}

プロパティをcolumn-reverse 、 row-reverseに変更することで反転させることもできます。

同じ理由

弾性ボックスのオーバーフローの制御

ボックス内の要素が多すぎて、水平方向の幅または高さが足りない場合、デフォルトではボックス内の要素の幅が縮小されます。

ここで行を折り返すことで解決できます

ボックスにflex-wrapを追加すると、オーバーフローした部分を下に折り返すことができます。

同様に、 wrap 属性の後にreverseを追加すると、下の行から折り返す効果が得られます。

水平軸と垂直軸についても同様です。

flex-flowを使用して軸の方向と折り返しの有無を同時に設定することもできます。

主軸と交差軸

では早速、写真を見てみましょう。

幅が十分でなく、要素がオーバーフローして行の折り返しが発生する場合は、交差軸が発生します。

プロパティがflex-idrection:columnの場合、主軸は垂直になり、交差軸は主軸に対して垂直になります。

主軸の配置

主軸を制御するプロパティはjustify-contentです。

以下は水平方向を例に挙げます

1. 体全体が片側に傾いている

デフォルトの方法は、主軸の左から右への開始に揃えることです。つまり、 justify-content:flex-start

末尾に揃える場合は、 justify-content:flex-endです。

主軸が右から左に反転している場合、開始は右側、終了は左側になります。

2. 全体を中央揃えにする: justify-content:center

3. 左右中央：justify-content:space-between

4. 要素の両側の間隔は同じです: justify-content:space-around

5. コンテンツスペース均等配置

交差軸配置

クロス描画を制御するプロパティはalign-cententです

1. 体全体が片側に傾いている

メイン軸と同様に、 flex-start交差軸の開始点であり、 flex-end交差軸の終了点です。

2. 全体の中央揃え: align-content:center

3. 交差軸が端に近く、他の要素が均等に配置されています: justify-content:space-between

4. 交差軸要素間の間隔は同じです: justify-content:space-around

5. 交差軸要素間の均等間隔: justify-content:space-evenly

フレックスボックス内の個々の要素を制御する

1. 整列

align-selfプロパティを使用すると、メイン軸全体を制御するのと同様に、個々の要素を制御できます。

2. 要素の利用可能なスペースの割り当て: flex-grow

flex-grow属性は、親ボックスに割り当てられる子要素の割合を示します。

両方とも 1 の場合:

他の比率にすることもできます。0の場合は元のサイズになります。

要素を動的に縮小する

要素の動的な収縮はflex-shrinkプロパティによって制御されます。内部要素の合計幅が外部要素の幅よりも大きく、 wrapを使用してそれらを囲まない場合は、flex-shrink を使用して内部要素のスケーリングを制御できます。

0 はズームなしを意味します。値が大きいほど、ズームが大きくなります。

主軸のフレックスベース

ボックス内の要素の基本サイズをflex-basis設定します。これは、CSSで設定された幅と高さよりも優先されます。

弾性要素の属性の組み合わせの書き方

フレックス成長:1;
フレックス収縮:2;
フレックスベース:100px;

同等

フレックス:1 2 100px;

要約する

CSS のフレックスレイアウトの詳細な説明については、これで終わりです。CSS フレックスレイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。