CSS3 弾性拡張ボックスの詳細な説明

CSS3 弾性拡張ボックスの詳細な説明

使用

  • フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、モバイル端末でも同様です。フレキシブル ボックスの使い方を習得することは、現在、適応型ページを作成する上で非常に重要です。このレイアウトルールを習得することは必須のスキルです。

弾性ボックスモデルの説明

  • 主軸は、フレックス アイテムが配置される方向 (ページ上の水平行、垂直列など) に沿って走る軸です。この軸の始点と終点は、主始点と主終点と呼ばれます**。
  • 交差軸は、フレックス アイテムが配置される方向に対して垂直な軸です。軸の始点と終点はクロス スタートとクロス エンド** と呼ばれます。
  • display: flex が設定されている親要素 (この場合は <section> ) は、フレックス コンテナーと呼ばれます。
  • フレックス コンテナー内でフレキシブル ボックスとして動作する要素は、フレックス アイテムと呼ばれます。

よく使われるプロパティ

flex-direction (フレキシブルコンテナ内のサブ要素の配置を指定します)

   行のデフォルト値。要素は行として水平に表示されます。
   row-reverse 逆の順序。
   列要素は列として垂直に表示されます。
   column-reverse 列と同じですが、順序が逆になります。

flex-wrap (このプロパティは、フレックス コンテナーが 1 行か複数行かを指定し、交差軸の方向によって新しい行が積み重ねられる方向が決まります。)

  nowrap のデフォルト値。要素を行または列に分割しないことを指定します。
  wrap は、必要に応じて要素を行または列に分割することを指定します。
  wrap-reverse は、必要に応じて要素が行または列内で逆の順序で折り返されることを指定します。

align-items プロパティは、フレックス コンテナーの現在の行の垂直軸方向におけるフレックス アイテムの配置を定義します。つまり、上行と下行のスタイルを指定します。

   ストレッチ デフォルト値。アイテムはコンテナに収まるように引き伸ばされます。
   center アイテムはコンテナの中央に配置されます。
   flex-start 項目はコンテナーの先頭に配置されます。
   flex-end アイテムはコンテナーの最後に配置されます。
   ベースライン アイテムはコンテナのベースラインに配置されます。

justify-content は、フレキシブル ボックス要素の主軸 (交差軸) 方向の配置を設定または取得するために使用されます。

  flex-start 項目はコンテナーの先頭に配置されます。
  flex-end アイテムはコンテナーの最後に配置されます。
  center アイテムはコンテナの中央に配置されます。
  space-between 項目は、行間にスペースを空けてコンテナ内に配置されます。
  space-around 項目は、各行の前、行間、行の後にスペースを置いてコンテナー内に配置されます。

柔軟な子要素のプロパティ

1.order属性

.flex-container .flex-item { order: <整数>; }

<integer>: 整数値を使用してソート順序を定義します。値が小さいほど先頭になります。負の値も指定できます。デフォルトは 0 です。

2.align-self は、弾性ボックス要素自体の交差軸(垂直軸)方向の配置を設定または取得します。 (align-items と同様)

以上がCSS3エラスティック拡張ボックスの詳しい説明です。CSS3エラスティック拡張ボックスの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。

<<:  RabbitMQ の Docker インストールと設定手順

>>:  重複したMySQLレコードを現場でチェックし、処理する実践的な記録

推薦する

ウェブ開発者はIE7とIE8の共存を懸念している

今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...

Dockerイメージをパッケージ化し、リモートサーバーにプッシュしてk8sにデプロイする方法

目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...

Excel をインポートするときに js で時間を変換する正しい方法について

目次1. 基本2. 問題の説明3. 解決策付録: js を使用して Excel の日付形式を変換する...

Vue フィルターの使用とタイムスタンプ変換の問題

目次1. 概念をすぐに認識する: 2. ローカルフィルター: 3. グローバルフィルター: 4. 拡...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

Linuxオペレーティングシステムは、タスクマネージャーの視覚化機能を実装するためにPythonを使用しています。

1. Pythonのインストール1. フォルダーを作成します。 mkdir python フォルダ...

MySQL で 2 つのデータベース テーブル構造を比較する方法

開発およびデバッグのプロセスでは、新しいコードと古いコードの違いを比較する必要があります。比較には、...

vue3 を使用してマテリアル ライブラリを構築する方法

目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...

Docker Tomcat のアクセス インターフェイスが表示されないのはなぜですか?

質問:オリジン サーバーはターゲット リソースの表現を見つけることができないか、既存の表現を公開した...

Vue で v-for を更新する方法

ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...

CentOS プラットフォーム上で LAMP 環境を素早く構築する方法

この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...

CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...

CSS ワールド - コード実践: 画像の Alt 情報の表示

ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...

MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法

実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...