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

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

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

.container {
    display: flex;
}

フレックス方向

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

• 行 (デフォルト): 水平、左から右。
• 行反転: 水平、右から左へ。
• 列: 上から下へ垂直。
• column-reverse: 垂直方向、下から上へ。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

フレックスラップ

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

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

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

コンテンツの正當(dāng)化

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

• flex-start (デフォルト): 項(xiàng)目は開(kāi)始點(diǎn)に揃えられます。
• flex-end: 項(xiàng)目は終點(diǎn)に揃えられます。
• 中央: アイテムは中央に配置されます。
• space-between: 項(xiàng)目間の間隔を均等に配分し、最初と最後の項(xiàng)目がそれぞれコンテナの端に接続されます。
• スペースアラウンド: 項(xiàng)目間の間隔を均等に配置し、項(xiàng)目の両側(cè)の間隔は等しくなります。
• space-evenly: アイテム間の間隔を均等に配置します。アイテムとコンテナの端の間、およびアイテム間の間隔は等しくなります。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

項(xiàng)目を揃える

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

• ストレッチ (デフォルト): アイテムは交差軸全體を埋めるように伸縮します。
• flex-start: 項(xiàng)目は交差軸の開(kāi)始點(diǎn)に位置合わせされます。
• flex-end: 項(xiàng)目は交差軸の端に揃えられます。
• center: 項(xiàng)目は交差軸の中心に配置されます。
• ベースライン: 項(xiàng)目はベースラインによって整列されます。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

コンテンツの整列

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

• ストレッチ (デフォルト): 各行は、交差軸全體を満たすようにストレッチされます。
• flex-start: 各行は交差軸の開(kāi)始點(diǎn)に位置合わせされます。
• flex-end: 各行は交差軸の端に位置合わせされます。
• center: 各行は交差軸の中心に位置合わせされます。
• space-between: 各行間のスペースを均等に配分し、最初と最後の行がコンテナの両端にそれぞれ接続されます。
• space-around: 各行間のスペースを均等に配分し、行の両側(cè)のスペースを均等にします。

.container {
    display: flex;
}

注文

項(xiàng)目の順序を定義します。値が小さいほど、次數(shù)が高くなります。デフォルト値は 0 です。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

フレックスグロー

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

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

フレックスシュリンク

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

フレックスベース

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

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

フレックス

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

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

整列自己

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

.item {
    order: <integer>;
}

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

表示: グリッド;

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

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

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

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

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

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

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

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

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

グリッド內(nèi)の項(xiàng)目間の間隔を設(shè)定します。長(zhǎng)さまたはパーセント値を受け入れます。

.container {
    display: flex;
}

グリッド自動(dòng)列とグリッド自動(dòng)行

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

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

グリッド自動(dòng)フロー

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

• 行 (デフォルト): 行ごとに塗りつぶします。
• 列: 列ごとに入力します。
• dense: 行または列が密で使用されている場(chǎng)合、グリッドにギャップがある場(chǎng)合、新しいアイテムはグリッドの最後に追加するのではなく、これらのギャップを埋めようとします。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

グリッド列の開(kāi)始、グリッド列の終了、グリッド行の開(kāi)始、およびグリッド行の終了

グリッド內(nèi)の項(xiàng)目の開(kāi)始位置と終了位置を手動(dòng)で指定します。

.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 を同時(shí)に設(shè)定するか、grid-template-areas で定義された領(lǐng)域名を參照するための短縮プロパティ。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

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

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

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

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

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

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

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

以上がCSS フレックスボックスとグリッド: レスポンシブなレイアウトを構(gòu)築する技術(shù)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。