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

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時間:2022-10-27 15:38:13    瀏覽:

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

Grid

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

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

例子

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)成）中的項目之間分配和對齊空間。它適用于各種顯示設備和屏幕尺寸。

首先，你必須將容器元素定義為帶有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 的獨特性

一維與二維

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

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

Grid 讓你可以更靈活地在塊中移動，而無需考慮 HTML 標記。

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

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

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

Grid 和 Flexbox 的區(qū)別

1.、維度和靈活性

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

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

2、對齊

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

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

結(jié)論

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

Flexbox 主要幫助對齊內(nèi)容和移動塊。

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

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

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

相關文章

標簽: css  Grid  flexbox  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */