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>
結(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>
結(jié)果
Grid 和 Flexbox 的獨(dú)特性
Grid 用于二維布局,而 Flexbox 用于一維布局。這意味著 Flexbox 可以同時(shí)作用于行或列,但 Grids 可以同時(shí)作用于兩者。
Flexbox 在處理任一元素(行或列)時(shí)為你提供更大的靈活性。在這種情況下,HTML 標(biāo)記和 CSS 將很容易管理。
Grid 讓你可以更靈活地在塊中移動(dòng),而無(wú)需考慮 HTML 標(biāo)記。
Flexbox 和 Grid 的主要獨(dú)特之處在于前者基于內(nèi)容,而后者基于布局。
Flexbox 布局最適合應(yīng)用程序組件和小規(guī)模布局,而 Grid 布局則專為非線性設(shè)計(jì)的較大規(guī)模布局而設(shè)計(jì)。
Grid 和 Flexbox 的區(qū)別
Flexbox 對(duì)項(xiàng)目之間的對(duì)齊和空間分布提供了更好的控制。作為一維的,F(xiàn)lexbox 只處理列或行。
Grid 具有二維布局功能,允許靈活的寬度作為長(zhǎng)度單位。這彌補(bǔ)了 Flex 的限制。
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)文章