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

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

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

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

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

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

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

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

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

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

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

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

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

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

プロパティをcolumn-reverserow-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 をよろしくお願いいたします。

<<:  SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

>>:  VueのTodoListケースの詳しい説明

推薦する

JavaScript配列の一般的なメソッドの概要

目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...

Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題

目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

HTML テーブルタグチュートリアル (20): 行の背景色属性 BGCOLOR

BGCOLOR 属性を使用して、行の背景色を設定できます。基本的な構文<TR BGcolor...

Ubuntu 20.04 オペレーティング システムの VMware インストール チュートリアル図

メモ: とにかく体験してみましょう。記録: NO.209この例の環境:仮想マシン: vmwareオペ...

JSは星を消すケースを実現する

この記事の例では、星を消すためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のと...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

W3C チュートリアル (9): W3C XPath アクティビティ

XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

Mysqlの自動増分IDについて知らないことがあるかもしれません

導入: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (AUT...