1. 基本概念 //任意のコンテナを Flex レイアウトとして指定できます。 。箱{ ディスプレイ: フレックス; } //インライン要素でも Flex レイアウトを使用できます。 。箱{ ディスプレイ: インラインフレックス; } //Flex レイアウトに設定すると、子要素の float、clear、vertical-align 属性が無効になることに注意してください。 2. コンテナのプロパティ 1. フレックス方向 flex-directionはアイテムの配置方向を決定します 。箱 { flex-direction: 行 | 行反転 | 列 | 列反転; } 2. フレックスラップ デフォルトでは、アイテムは線(「軸」とも呼ばれます)上に配置されます。 flex-wrap プロパティは、1 つの軸が収まらない場合に折り返す方法を定義します。 。箱{ flex-wrap: nowrap | wrap | wrap-reverse; } 3. フレックスフロー flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの短縮形であり、デフォルト値は row nowrap です。 。箱 { flex-flow: <flex-direction> || <flex-wrap>; } 4. コンテンツの正当化 justify-content プロパティは、項目を水平方向に配置する方法を定義します。 。箱 { justify-content: flex-start | flex-end | center | space-between | space-around; } 5. アイテムの位置揃え align-item プロパティは、項目の垂直方向の配置を定義します。 。箱 { align-items: flex-start | flex-end | center | baseline | Stretch; } 3.6 align-contentプロパティ align-content プロパティは、複数の軸の配置を定義します。プロジェクトにグリッド ラインが 1 つしかない場合、このプロパティは効果がありません。 。箱 { align-content: flex-start | flex-end | center | space-between | space-around | Stretch; } 3. プロジェクトの属性 1. 注文 order 属性は、項目を並べ替える順序を定義します。値が小さいほど、順位が高くなります。デフォルト値は 0 です。 。アイテム { 順序: <整数>; } 2. フレックスグロー flex-grow 属性は、アイテムの拡大率を定義します。デフォルト値は 0 で、残りのスペースがある場合は拡大されないことを意味します。 。アイテム { flex-grow: <number>; /* デフォルト 0 */ } // すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (ある場合) が均等に分割されます。 1 つのアイテムの flex-grow プロパティが 2 で、他のアイテムの flex-grow プロパティが 1 の場合、前者は他のアイテムの 2 倍のスペースを占めることになります。 3. フレックスシュリンク flex-shrink プロパティは、アイテムの縮小率を定義します。デフォルト値は 1 で、十分なスペースがない場合、アイテムは縮小されます。 。アイテム { flex-shrink: <number>; /* デフォルト 1 */ } 4. フレックスベース flex-basis プロパティは、追加のスペースが配分される前にアイテムが占める主なサイズを定義します。ブラウザはこのプロパティを使用して、主軸上に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、プロジェクトの元のサイズになります。 。アイテム { flex-basis: <長さ> | auto; /* デフォルトは auto */ } /* 幅または高さ属性と同じ値 (350px など) に設定すると、アイテムは固定のスペースを占有します。 */ 4.5 フレックスプロパティ flex プロパティは、flex-grow、flex-shrink、flex-basis の略語です。デフォルト値は 0 1 auto です。最後の 2 つの属性はオプションです。 。アイテム { flex: なし | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } このプロパティには、auto (1 1 auto) と none (0 0 auto) の 2 つのショートカット値があります。 4.6 align-selfプロパティ align-self プロパティを使用すると、align-items プロパティをオーバーライドして、個々の項目を他の項目とは異なる位置に配置することが可能になります。デフォルト値は auto で、親要素の align-items プロパティを継承することを意味します。親要素がない場合、stretch と同等になります。 align-itemsと同等 。アイテム { align-self: auto | flex-start | flex-end | center | baseline | Stretch; } 要約する 上記は、エディターが紹介した CSS3 Flex エラスティック レイアウトのサンプル コードの詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: Ace をベースにした Markdown エディターを共有する
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...
チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...
目次総合的な比較アクティブの観点から機能的な観点から詳細な比較1. エース2. コードミラー3. モ...
目次私たちが毎日実行している Linux システムとは何でしょうか? LinuxカーネルとGNUシス...
まず、例を見てみましょう。記事テーブルにはタイプフィールドがあり、1 見出し、2 おすすめ、3 ホッ...
目次node.js+nvm+npm を設定するnpmスイッチタオバオミラーVue.jsをインストール...
目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...
プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...
目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...
1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...
CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...
データベースでcreate tableステートメントを実行する テーブル `sys_acl` を作成...
目次Reactにaxios依存関係をインストールして導入するGETリクエストにaxiosを使用するa...