技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

CSS Grid 和 CSS Flexbox 的區(qū)別

作者:admin    時(shí)間:2022-10-27 15:38:13    瀏覽:

CSS Grid 和 CSS Flexbox 都是一種網(wǎng)絡(luò)布局，但它們的使用是有所不同的，本文介紹CSS Grid 和 CSS Flexbox 有哪些區(qū)別和如何適當(dāng)?shù)厥褂盟鼈儭?/p>

Grid

CSS網(wǎng)絡(luò)布局，是一種基于二維網(wǎng)格的布局系統(tǒng)，具有行和列，可以更輕松地設(shè)計(jì)網(wǎng)頁(yè)，而無(wú)需使用浮動(dòng)和定位。像表格一樣，Grid 布局允許我們將元素對(duì)齊到列和行中。

首先，你必須將容器元素定義為帶有display: grid的網(wǎng)格，使用 grid-template-columns 和 grid-template-rows 設(shè)置列和行大小，然后使用 grid-column 將其子元素放入具有網(wǎng)格列和網(wǎng)格行的網(wǎng)絡(luò)中。

例子

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
    .main {
        display: grid;
        display: grid;
        grid: auto auto / auto auto auto auto;
        grid-gap: 10px;
        background-color: green;
        padding: 10px;
    }
    
    .gfg {
        background-color: rgb(255, 255, 255);
        text-align: center;
        padding: 25px 0;
        font-size: 30px;
    }
    </style>
</head>

<body>
    <h2 style="text-align: center;">Welcome To WebKaka </h2>
    <div class="main">
        <div class="gfg">Home</div>
        <div class="gfg">Read</div>
        <div class="gfg">Write</div>
        <div class="gfg">About Us</div>
        <div class="gfg">Contact Us</div>
        <div class="gfg">Privacy Policy</div>
    </div>
</body>

</html>

demodownload

結(jié)果

 

Flexbox

CSS Flexbox 提供一維布局。它有助于在容器（由網(wǎng)格構(gòu)成）中的項(xiàng)目之間分配和對(duì)齊空間。它適用于各種顯示設(shè)備和屏幕尺寸。

首先，你必須將容器元素定義為帶有display: flex;的網(wǎng)格。 

例子

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
    .main {
        display: flex;
        display: flex;
        grid: auto auto / auto auto auto auto;
        grid-gap: 10px;
        background-color: green;
        padding: 10px;
    }
    
    .gfg {
        background-color: rgb(255, 255, 255);
        text-align: center;
        padding: 25px 0;
        font-size: 30px;
    }
    </style>
</head>

<body>
    <h2 style="text-align: center;">Welcome To WebKaka </h2>
    <div class="main">
        <div class="gfg">Home</div>
        <div class="gfg">Read</div>
        <div class="gfg">Write</div>
        <div class="gfg">About Us</div>
        <div class="gfg">Contact Us</div>
        <div class="gfg">Privacy Policy</div>
    </div>
</body>

</html>

demodownload

結(jié)果

 

Grid 和 Flexbox 的獨(dú)特性

一維與二維

Grid 用于二維布局，而 Flexbox 用于一維布局。這意味著 Flexbox 可以同時(shí)作用于行或列，但 Grids 可以同時(shí)作用于兩者。

Flexbox 在處理任一元素（行或列）時(shí)為你提供更大的靈活性。在這種情況下，HTML 標(biāo)記和 CSS 將很容易管理。

Grid 讓你可以更靈活地在塊中移動(dòng)，而無(wú)需考慮 HTML 標(biāo)記。

內(nèi)容優(yōu)先與布局優(yōu)先

Flexbox 和 Grid 的主要獨(dú)特之處在于前者基于內(nèi)容，而后者基于布局。

Flexbox 布局最適合應(yīng)用程序組件和小規(guī)模布局，而 Grid 布局則專為非線性設(shè)計(jì)的較大規(guī)模布局而設(shè)計(jì)。

Grid 和 Flexbox 的區(qū)別

1.、維度和靈活性

Flexbox 對(duì)項(xiàng)目之間的對(duì)齊和空間分布提供了更好的控制。作為一維的，F(xiàn)lexbox 只處理列或行。

Grid 具有二維布局功能，允許靈活的寬度作為長(zhǎng)度單位。這彌補(bǔ)了 Flex 的限制。

2、對(duì)齊

Flex 允許開發(fā)人員垂直或水平對(duì)齊元素，這在開發(fā)人員創(chuàng)建和反轉(zhuǎn)行或列時(shí)使用。

CSS Grid 為網(wǎng)格流動(dòng)性和自動(dòng)關(guān)鍵字功能部署分?jǐn)?shù)度量單位，以自動(dòng)調(diào)整列或行。

結(jié)論

CSS Grid 幫助你創(chuàng)建網(wǎng)頁(yè)的外部布局。你可以使用它構(gòu)建復(fù)雜的響應(yīng)式設(shè)計(jì)。這就是為什么它被稱為“布局優(yōu)先”。

Flexbox 主要幫助對(duì)齊內(nèi)容和移動(dòng)塊。

CSS Grid 用于二維布局，它適用于行和列。

Flexbox 僅在一維（行或列）中效果更好。

如果你同時(shí)使用兩者，將會(huì)節(jié)省更多時(shí)間。 

相關(guān)文章

標(biāo)簽: css  Grid  flexbox  
x