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

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

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

フレックスレイアウトモードをオンにします。要素を 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>;
}
</integer>

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

表示: グリッド;

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

.item {
    flex-grow: <number>; /* Default is 0 */
}
</number>

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

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

.item {
    flex-shrink: <number>; /* defaults to 1 */
}
</number>

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

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

.item {
    flex-basis: <length> | <percentage> | auto | content;
}
</percentage></length>

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

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

.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 サイトの他の関連記事を参照してください。