Rumah > Artikel > hujung hadapan web > Grid dan Flexbox

Grid dan Flexbox

王林asal: 2024-09-10 18:00:09728semak imbas

Grid and Flexbox

Grid dan Flexbox ialah kedua-dua sistem reka letak yang berkuasa dalam CSS, setiap satu direka untuk jenis tugasan reka letak yang berbeza. Berikut ialah perbandingan kedua-duanya, bersama-sama dengan contoh untuk menggambarkan perbezaan mereka:

Flexbox

Tujuan:
Flexbox direka untuk susun atur satu dimensi. Ia mengendalikan penjajaran dan jarak item di sepanjang paksi tunggal (sama ada baris atau lajur).

Ciri Utama:

Jajarkan item secara mendatar atau menegak.
Agihkan ruang dalam bekas.
Kawal pesanan dan saiz item secara fleksibel.

Contoh:

<!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>

Ciri yang Digambarkan:

Item dijajarkan dalam satu baris dengan ruang diedarkan di antaranya.
Item dipusatkan secara menegak di dalam bekas.
Item membesar dan mengecut berdasarkan ruang yang ada.

Grid

Tujuan:
Grid direka untuk susun atur dua dimensi. Ia mengendalikan kedua-dua baris dan lajur secara serentak, membenarkan reka letak yang kompleks.

Ciri Utama:

Buat kedua-dua baris dan lajur.
Kawal peletakan item dalam grid.
Rentang item merentas berbilang baris dan lajur.

Contoh:

<!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>

Ciri yang Digambarkan:

Mencipta grid dengan tiga lajur yang sama.
Item diletakkan ke dalam grid dengan jurang di antaranya.
Item kedua merentasi dua lajur.

Ringkasan

Flexbox: Terbaik untuk reka letak satu dimensi (sama ada baris atau lajur). Hebat untuk menjajarkan item, mengagihkan ruang dan mengendalikan reka letak yang ringkas.
Grid: Terbaik untuk reka letak dua dimensi (baris dan lajur). Sesuai untuk reka bentuk yang lebih kompleks yang memerlukan peletakan dan kawalan yang tepat ke atas kedua-dua dimensi.

Memilih antara Flexbox dan Grid bergantung pada kerumitan reka letak anda dan sama ada anda memerlukan kawalan satu dimensi atau dua dimensi. Selalunya, kedua-duanya boleh digunakan bersama untuk mencapai reka letak yang diingini.

Atas ialah kandungan terperinci Grid dan Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css for column

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Projek Menawan: Reka Letak Kad Fleksibel ResponsifArtikel seterusnya：Projek Menawan: Reka Letak Kad Fleksibel Responsif

Artikel berkaitan

Lihat lagi