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ケースの詳しい説明

推薦する

MySQL の一時テーブルと派生テーブルについての簡単な説明

派生テーブルについてメイン クエリに派生テーブルが含まれている場合、または SELECT ステートメ...

初心者向けの MySQL のインストール方法 (効果が実証済み)

1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...

ウェブデザインにおけるグリッドシステム

グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...

Nginx Webサーバーのサンプルコードの設定方法の詳細な説明

概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...

nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)

proxy_intercept_errors と recursive_error_pages を使...

TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。

目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...

床スクロール効果を実現する js

この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...

Docker Alpine イメージのタイムゾーン問題に対する完璧な解決策

最近、Docker を使用して Java アプリケーションをデプロイしていたときに、タイムゾーンが間...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法

1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...

Dockerコンテナの個別展開のためのLNMPの実装

1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...