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

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-startflex-endspace-aroundspace-betweenspace-evenなどの値に設定することもできます。具体的な効果を確認するには、ご自身で実験してみてください。

2. アイテムを揃える

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

CS: ...

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

効果:

flex を使用すると、CSS での垂直方向の中央揃えの複雑な問題が解決されます。同様に、 align-itemsflex-startflex-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-directionflex-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 を応援していただければ幸いです。

<<:  Pythonは出力をcsv操作に書き込む

>>:  MySQL での and or クエリの優先度分析

推薦する

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

Vue+js 矢印をクリックして画像を切り替える

この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...

MySQLを閉じることができない問題を解決する方法

mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...

WeChatアプレットでvantフレームワークを使用するための具体的な手順

目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...

Vue でユーザー権限に基づいてルートを動的に追加する方法

ユーザーの権限に応じて異なるメニュー ページを表示します。知識ポイントルートガード(事前ガードを使用...

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...

バッテリー残量が少なくなったときに Linux を自動シャットダウンする方法

序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

ノードでシェルスクリプトを使用する方法

背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...

HTML テーブル マークアップ チュートリアル (40): ヘッダーの暗い境界線の色属性 BORDERCOLORDARK

テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...

Linux 仮想ホストで SourceGuardian (sg11) 暗号化コンポーネントを有効にする詳細な手順

注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...

MySQLコマンドラインでSQLファイルを実行するいくつかの方法

目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...

MySQLデータベースはMMM高可用性クラスタアーキテクチャを実装します

コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...