그리드와 Flexbox-CSS 튜토리얼-php.cn

그리드와 Flexbox

王林

풀어 주다： 2024-09-10 18:00:09

원래의

726명이 탐색했습니다.

Grid and Flexbox

Grid와 Flexbox는 모두 CSS의 강력한 레이아웃 시스템으로, 각각 다양한 유형의 레이아웃 작업을 위해 설계되었습니다. 다음은 차이점을 설명하는 예와 함께 두 가지를 비교한 것입니다.

플렉스박스

목적:
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>

로그인 후 복사

설명된 기능:

항목은 간격을 두고 일렬로 정렬됩니다.
항목은 컨테이너의 세로 중앙에 배치됩니다.
사용 가능한 공간에 따라 항목이 늘어나고 줄어듭니다.

그리드

목적:
그리드는 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>

로그인 후 복사

설명된 기능: