CSS3 Flex エラスティックレイアウトのサンプルコードの詳細な説明

CSS3 Flex エラスティックレイアウトのサンプルコードの詳細な説明

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Dockerとイメージの操作方法

>>:  Ace をベースにした Markdown エディターを共有する

推薦する

Nginxの書き換えモジュールの詳細な説明

書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル

Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...

MySQL シリーズ 8 MySQL サーバー変数

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

Vue コード強調プラグインの総合的な比較と評価

目次総合的な比較アクティブの観点から機能的な観点から詳細な比較1. エース2. コードミラー3. モ...

LinuxとGNUシステムの関係の詳細な説明

目次私たちが毎日実行している Linux システムとは何でしょうか? LinuxカーネルとGNUシス...

MySQL での find_in_set() 関数の使用に関する詳細な説明

まず、例を見てみましょう。記事テーブルにはタイプフィールドがあり、1 見出し、2 おすすめ、3 ホッ...

MAC+PyCharm+Flask+Vue.js ビルドシステム

目次node.js+nvm+npm を設定するnpmスイッチタオバオミラーVue.jsをインストール...

Nodejs 探索: シングルスレッドの高並行性の原理を深く理解する

目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...

Reactでプロキシを有効にする2つの実用的な方法

プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...

TypeScript 環境を構築して VSCode にデプロイする詳細な手順

目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...

docker を使用して Redis マスター/スレーブを構築する方法

1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...

CSS (カスケーディング スタイル シート) の一般的な用語の概要

CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...

MySQL が「operate_time」エラーのデフォルト値が無効であると報告する問題を解決する

データベースでcreate tableステートメントを実行する テーブル `sys_acl` を作成...

Reactでaxiosを使用してリクエストを送信する一般的な方法

目次Reactにaxios依存関係をインストールして導入するGETリクエストにaxiosを使用するa...