CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する

基本的な紹介

特徴

• Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイプです。
• Flexbox では、親要素や兄弟要素を基準にして要素の位置、サイズ、間隔を決定できます。
• Flexbox はレスポンシブ性に優れています。

仕組み

親要素のdisplayプロパティをflexに設定すると、すべての子要素はflex itemになり、子要素の配置、サイズ、間隔などを制御できるようになります。

互換性

フレックスコンテナ

まず、最も単純な flex の例を見てみましょう。外側の div はdisplay: flex設定されて flex コンテナーになり、内側の 3 つの div は自動的に flex アイテムになります。

html:

<div class="flex-container">
  <div class="ボックス 1"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

css:

.flex-container{ 最大幅: 960px; マージン: 0 自動; ディスプレイ:flex; }
.box{ 高さ: 100px; 最小幅: 100px; }
.one{ 背景: ピンク; }
.two{ 背景: ライトグリーン; }
.three{ 背景: スカイブルー; }

効果：

効果はフローティング レイアウトに似ていますが、フローティングを使用して実装する場合はより多くのコードを記述する必要がありますが、flex では 1 行で実行できます。

1. コンテンツの正当化

フレックス アイテムを中央揃えにしたい場合は、フレックス コンテナーに CSS プロパティjustify-contentを追加します。これは、フレックス アイテムの主軸上の配置を制御します (flex-drection によって決定され、デフォルトでは水平)。

.flex-コンテナ{
  ...
  コンテンツの中央揃え: 中央;
}

効果は以下のようになります。

さらに、 justify-content flex-start 、 flex-end 、 space-around 、 space-between 、 space-evenなどの値に設定することもできます。具体的な効果を確認するには、ご自身で実験してみてください。

2. アイテムを揃える

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

CS: ...

.flex-コンテナ{
  最大幅: 960px;
  マージン: 0 自動;
  ディスプレイ:フレックス;
  コンテンツの中央揃え: 中央;
  高さ: 200px;
  背景色: 白;
  アイテムの位置を中央揃えにします。
}

効果：

flex を使用すると、CSS での垂直方向の中央揃えの複雑な問題が解決されます。同様に、 align-itemsはflex-startやflex-endなどの他の値もあります。

3. フレックス方向

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

CS: ...

.flex-コンテナ{
  ...
  
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
}

効果：

4. フレックスラップ

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

.flex-コンテナ{
  最大幅: 960px;
  マージン: 0 自動;
  ディスプレイ:フレックス;
  flex-wrap: ラップ;
}

。箱{
  高さ: 100px;
  最小幅: 300px;
  フレックス成長: 1;
}

ウィンドウを圧縮すると、次のような効果が得られます。

Flex wrap にはwrap-reverseという値もあります。この値を設定すると、ラップされた要素は他の要素の上に配置されます。

このことから、flex wrap はある程度メディアクエリを置き換えることができることがわかります。

5. フレックスロウ

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

フレックスアイテム

1. フレックスグロー

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

CSS を次のように変更します。

。箱 { 
    高さ: 100px; 
    最小幅: 100px; 
    フレックス成長:1; 
}

効果：

この時点でflex-growが 1 になっているため、3 つの子要素が親要素のスペースを均等に分割していることがわかります。 1 つの子要素のみにflex-growが設定されている場合はどうなりますか?

CS: ...

.box{ 高さ: 100px; 最小幅: 100px; }
.one{ 背景: ピンク; flex-grow: 1; }

効果：

このとき、2 と 3 のサイズは変更されず、1 が親要素の残りのスペースを占有します。

1 のflex-grow 2 に変更し、2 と 3 を 1 に変更すると、何が起こるか見てみましょう。

css:

.box{ 高さ: 100px; 最小幅: 100px; flex-grow:1; }
.one{ 背景: ピンク; flex-grow: 2; }

効果：

1 の幅が 2 と 3 の 2 倍になっていることがわかります。つまり、フレックス アイテムのサイズはflex-growの値に比例しているということです。

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

flex-growの反対はflex-shrink flex-shrinkで、サブ要素のサイズがフレックス コンテナーを超えた後にサブ要素の圧縮を制御するために使用されます。例をご覧ください:

ボックスの幅をフレックス コンテナーの 1/3 に変更し、1、2、3 のflex-shrinkそれぞれ 1、2、3 にします。

.box{ 高さ: 100px; 幅: 320px; }
.one{ 背景: ピンク; flex-shrink: 1; }
.two{ 背景: ライトグリーン; flex-shrink: 2; }
.three{ 背景: スカイブルー; flex-shrink: 3; }

ウィンドウが通常のサイズの場合、効果は次のようになります。

ウィンドウを圧縮して狭くすると、次のような効果が得られます。

フレックス コンテナーの幅が 540 ピクセルになると、子要素はさまざまな程度に圧縮されます。 1、2、3 の圧縮された幅はそれぞれ 250px、180px、110px です。したがって、最初の幅 320px と比較すると、圧縮された幅はそれぞれ 70px、140px、210px になります。70 70 : 140 : 210 = 1 : 2 : 3 、これは flex shrink の値に反比例します。実際、圧縮率はフレックスアイテムの初期サイズにも関係しますが、初期サイズが同じ場合、その影響は無視されます。

flex の縮小がfs 、flex 項目の初期サイズがis 、flex 項目の圧縮サイズがssであると仮定すると、正しい式は次のようになります。

fs ∝ is/ss

3. フレックスベース

flex-basis は、フレックス アイテムの初期の幅と高さを設定するために使用されます。すでに幅と高さがあるのに、なぜ flex-basis を追加する必要があるのでしょうか? flex-basis と width/height の違いは次のとおりです。

1. flex-basis は flex-items にのみ使用できますが、width/height は他の種類の要素に適用できます。
2. flex-basis は flex-direction と関連しています。flex-direction が row の場合、flex-basis は幅を設定します。flex-direction が column の場合、flex-basis は高さを設定します。
3. フレックスアイテムが絶対配置されている場合、flex-basis は機能しませんが、width/height は機能します。
4. flex-basis は、flex: 1 0 200px; のように、flex の短縮形として使用できます。

flex-basis の役割を確認し、CSS を次のように変更してみましょう。

。箱{
  高さ: 100px;
  フレックス成長: 1;
}
。1つ{
  背景: ピンク;
  フレックスベース: 100px;
}
。二{
  背景: ライトグリーン;
  フレックスベース: 200px;
}
。三つ{
  背景: スカイブルー;
  フレックスベース: 300px;
}

3 つのフレックス アイテムはすべて、初期幅に同じ幅が追加されます。

もちろん、この例はwidthを使っても同じ効果が得られます。ただし、効果は同じですが、意味が異なります。したがって、flex レイアウトを使用する場合は、仕様に従い、適切な人を選択して適切な操作を行うようにしてください。

4. 注文

order属性を使用すると、flex アイテムの順序を変更できます。例:

html:

<セクション id="ブロック">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</セクション>

CS: ...

#ブロック{
  ディスプレイ: フレックス;
  マージン: 10px;
  コンテンツの両端揃え: スペースの間;
}

#ブロック div{
  フレックス: 0 0 100px;
  パディング: 40px 0;
  テキスト配置: 中央;
  背景: #ccc;
}

デフォルトの順序は、HTML 内での flex アイテムの表示順序に基づきます。

フレックス アイテムのorder値を変更すると、フレックス アイテムは順序値に従って昇順で配置されます。

CS: ...

.one{ 順序: 4; }
.two{ 順序: 3; }
.three{ 順序: 2; }
.four{ 順序: 1; }

効果：

結論

これは flex の簡単な紹介です。flex は非常に強力かつシンプルです。ぜひ使って楽しんでいただければ幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。