グリッドとフレックスボックス-CSSチュートリアル-php.cn

グリッドとフレックスボックス

王林

リリース： 2024-09-10 18:00:09

オリジナル

636 人が閲覧しました

Grid and Flexbox

Grid と Flexbox はどちらも CSS の強力なレイアウトシステムであり、それぞれがさまざまな種類のレイアウトタスク向けに設計されています。以下に 2 つの比較と、その違いを示す例を示します。

フレックスボックス

目的:
Flexbox は 1 次元レイアウト用に設計されています。単一の軸 (行または列) に沿った項目の配置と間隔を処理します。

主な機能:

アイテムを水平方向または垂直方向に整列させます。
コンテナ内のスペースを分配します。
アイテムの順序とサイズを柔軟に制御します。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* Distributes space between items */
            align-items: center; /* Aligns items vertically in the center */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
            flex: 1; /* Makes items flexible */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

ログイン後にコピー

図解された機能:

項目は間隔をあけて 1 列に配置されます。
アイテムはコンテナ内で垂直方向の中央に配置されます。
アイテムは利用可能なスペースに基づいて拡大または縮小します。

グリッド

目的:
グリッドは 2 次元レイアウト用に設計されています。行と列の両方を同時に処理できるため、複雑なレイアウトが可能です。

主な機能:

行と列の両方を作成します。
グリッド内のアイテムの配置を制御します。
項目を複数の行と列にまたがります。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
            grid-gap: 10px; /* Adds space between grid items */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item:nth-child(2) {
            grid-column: span 2; /* Makes the second item span two columns */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

ログイン後にコピー

図解された機能: