ホームページ ウェブフロントエンド 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 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

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

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

毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

HTMLダイアログ要素を使用したいくつかの実践 HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

ペーパーフォーム ペーパーフォーム Apr 16, 2025 am 11:24 AM

購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? 「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター 毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター Apr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

独自の非JavaScriptベースの分析をホストするためのオプション 独自の非JavaScriptベースの分析をホストするためのオプション Apr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

See all articles