ホームページ ウェブフロントエンド CSSチュートリアル CSS フレックスボックスとグリッド: レスポンシブなレイアウトを構築する技術

CSS フレックスボックスとグリッド: レスポンシブなレイアウトを構築する技術

Dec 20, 2024 am 11:03 AM

CSS Flexbox and Grid: The Art of Building Responsive Layouts

フレックス 柔軟なレイアウト

ディスプレイ: フレックス

フレックスレイアウトモードをオンにします。要素を Flex コンテナとして設定すると、その直接の子要素が Flex アイテムになります。

.container {
    display: flex;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

フレックス方向

主軸の方向(アイテムの配置方向)を定義します。オプションの値:

  • 行 (デフォルト): 水平、左から右。
  • 行反転: 水平、右から左へ。
  • 列: 上から下へ垂直。
  • column-reverse: 垂直方向、下から上へ。
.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

フレックスラップ

行に十分なスペースがない場合に折り返すかどうかを制御します。オプションの値:

  • nowrap (デフォルト): ラップなし。アイテムがコンテナからオーバーフローする可能性があります。
  • ラップ: ラップ、アイテムは複数の行に配置されます。
  • wrap-reverse: ラップ、最初の行が下にあり、後続の行が上に配置されます。
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

コンテンツの正当化

主軸の位置合わせを定義します。オプションの値:

  • flex-start (デフォルト): 項目は開始点に揃えられます。
  • flex-end: 項目は終点に揃えられます。
  • 中央: アイテムは中央に配置されます。
  • space-between: 項目間の間隔を均等に配分し、最初と最後の項目がそれぞれコンテナの端に接続されます。
  • スペースアラウンド: 項目間の間隔を均等に配置し、項目の両側の間隔は等しくなります。
  • space-evenly: アイテム間の間隔を均等に配置します。アイテムとコンテナの端の間、およびアイテム間の間隔は等しくなります。
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

項目を揃える

交差軸上の位置合わせを定義します。オプションの値:

  • ストレッチ (デフォルト): アイテムは交差軸全体を埋めるように伸縮します。
  • flex-start: 項目は交差軸の開始点に位置合わせされます。
  • flex-end: 項目は交差軸の端に揃えられます。
  • center: 項目は交差軸の中心に配置されます。
  • ベースライン: 項目はベースラインによって整列されます。
.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

コンテンツの整列

複数行の Flex レイアウト (flex-wrap: Wrap) でのみ機能し、交差軸上の複数行の項目の配置を定義します。オプションの値:

  • ストレッチ (デフォルト): 各行は、交差軸全体を満たすようにストレッチされます。
  • flex-start: 各行は交差軸の開始点に位置合わせされます。
  • flex-end: 各行は交差軸の端に位置合わせされます。
  • center: 各行は交差軸の中心に位置合わせされます。
  • space-between: 各行間のスペースを均等に配分し、最初と最後の行がコンテナの両端にそれぞれ接続されます。
  • space-around: 各行間のスペースを均等に配分し、行の両側のスペースを均等にします。
.container {
    display: flex;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

注文

項目の順序を定義します。値が小さいほど、次数が高くなります。デフォルト値は 0 です。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

フレックスグロー

アイテムの拡大率を定義します。デフォルト値は 0 で、拡大しないことを意味します。すべての項目がゼロ以外の値に設定されている場合、残りのスペースは比例して分配されます。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

フレックスシュリンク

アイテムの収縮率を定義します。デフォルトは 1 で、縮小できることを意味します。すべての項目がゼロ以外の値に設定されている場合、コンテナーからのオーバーフローを防ぐために、それらの項目は比例して縮小します。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

フレックスベース

残りのスペースが分配される前のアイテムの初期サイズを定義します。長さ、パーセンテージ、自動 (デフォルト)、または内容の値を受け入れます。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

フレックス

flex-grow、flex-shrink、および flex-basis の短縮形。デフォルトは 0 1 自動です。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
ログイン後にコピー
ログイン後にコピー

整列自己

コンテナの align-items プロパティをオーバーライドして、交差軸上の単一項目の配置を定義します。オプションの値は align-items と同じです。

.item {
    order: <integer>;
}
ログイン後にコピー

グリッド グリッド レイアウト

表示: グリッド;

グリッド レイアウト モードをオンにします。要素を Grid コンテナとして設定すると、その直接の子が Grid アイテム (セル) になります。

.item {
    flex-grow: <number>; /* Default is 0 */
}
ログイン後にコピー

グリッド テンプレートの列とグリッド テンプレートの行

グリッドの列トラックと行トラックのサイズを定義します。長さ、パーセンテージ、fr (グリッド空間の分数を表す分数単位)、または auto 値を受け入れます。また、repeat() 関数を使用して繰り返しトラックを作成したり、minmax() 関数を使用してトラックの最小サイズと最大サイズを定義したりすることもできます。

.item {
    flex-shrink: <number>; /* defaults to 1 */
}
ログイン後にコピー

グリッドテンプレートエリア

項目に名前を付け、文字列でグリッド構造を記述することにより、グリッド レイアウトの領域を定義します。アイテム名には を使用しています。空白のセルを表します。

.item {
    flex-basis: <length> | <percentage> | auto | content;
}
ログイン後にコピー

グリッド ギャップまたはグリッド列ギャップおよびグリッド行ギャップ

グリッド内の項目間の間隔を設定します。長さまたはパーセント値を受け入れます。

.container {
    display: flex;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

グリッド自動列とグリッド自動行

グリッドを自動的に埋めるときに、新しく追加された行または列のトラック サイズを定義します。アイテムが定義されたグリッド範囲を超えると有効になります。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

グリッド自動フロー

グリッド項目がどのように自動的に入力され、配置されるかを制御します。オプションの値:

  • 行 (デフォルト): 行ごとに塗りつぶします。
  • 列: 列ごとに入力します。
  • dense: 行または列が密で使用されている場合、グリッドにギャップがある場合、新しいアイテムはグリッドの最後に追加するのではなく、これらのギャップを埋めようとします。
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

グリッド列の開始、グリッド列の終了、グリッド行の開始、およびグリッド行の終了

グリッド内の項目の開始位置と終了位置を手動で指定します。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

グリッドエリア

grid-row-start、grid-column-start、grid-row-end、grid-column-end を同時に設定するか、grid-template-areas で定義された領域名を参照するための短縮プロパティ。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

CSS グリッドとフレックスボックスを組み合わせた

場合によっては、CSS グリッドとフレックスボックスの利点を組み合わせて、より複雑な応答性の高いレイアウトを作成できます。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
ログイン後にコピー
ログイン後にコピー

まず、CSS グリッドを使用して、適応可能な列幅を持つグリッド レイアウトを作成します。各グリッド項目 (子要素) は内部で Flexbox を使用して、コンテンツを垂直方向の中央に配置します。画面幅が 768 ピクセル未満の場合、メディア クエリはモバイル デバイスに適応するために単一列レイアウトに切り替わります。

フレックスボックスとグリッドの選択

フレックスボックスを使用するかグリッドを使用するかの選択は、通常、特定のニーズによって異なります。

  • フレックスボックスは、行や列での要素の配置、要素の位置合わせやパディングなど、1 次元レイアウトの処理に適しています。
  • CSS グリッドは、テーブルや複雑なグリッド レイアウトなどの 2 次元レイアウトや正確なセル制御の処理に適しています。

以上がCSS フレックスボックスとグリッド: レスポンシブなレイアウトを構築する技術の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

See all articles