|
|
|
|
|
|
CSS Grid 和 CSS Flexbox 的區別
作者:admin 時間:2022-10-27 15:38:13 瀏覽:CSS Grid 和 CSS Flexbox 都是一種網絡布局，但它們的使用是有所不同的，本文介紹CSS Grid 和 CSS Flexbox 有哪些區別和如何適當地使用它們。
Grid
CSS網絡布局，是一種基于二維網格的布局系統，具有行和列，可以更輕松地設計網頁，而無需使用浮動和定位。像表格一樣，Grid 布局允許我們將元素對齊到列和行中。
首先，你必須將容器元素定義為帶有display: grid的網格，使用 grid-template-columns 和 grid-template-rows 設置列和行大小，然后使用 grid-column 將其子元素放入具有網格列和網格行的網絡中。
例子
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>
結果
Flexbox
CSS Flexbox 提供一維布局。它有助于在容器（由網格構成）中的項目之間分配和對齊空間。它適用于各種顯示設備和屏幕尺寸。
首先，你必須將容器元素定義為帶有display: flex;的網格。
例子
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>
結果
Grid 和 Flexbox 的獨特性
一維與二維
Grid 用于二維布局，而 Flexbox 用于一維布局。這意味著 Flexbox 可以同時作用于行或列，但 Grids 可以同時作用于兩者。
Flexbox 在處理任一元素（行或列）時為你提供更大的靈活性。在這種情況下，HTML 標記和 CSS 將很容易管理。
Grid 讓你可以更靈活地在塊中移動，而無需考慮 HTML 標記。
內容優先與布局優先
Flexbox 和 Grid 的主要獨特之處在于前者基于內容，而后者基于布局。
Flexbox 布局最適合應用程序組件和小規模布局，而 Grid 布局則專為非線性設計的較大規模布局而設計。
Grid 和 Flexbox 的區別
1.、維度和靈活性
Flexbox 對項目之間的對齊和空間分布提供了更好的控制。作為一維的，Flexbox 只處理列或行。
Grid 具有二維布局功能，允許靈活的寬度作為長度單位。這彌補了 Flex 的限制。
2、對齊
Flex 允許開發人員垂直或水平對齊元素，這在開發人員創建和反轉行或列時使用。
CSS Grid 為網格流動性和自動關鍵字功能部署分數度量單位，以自動調整列或行。
結論
CSS Grid 幫助你創建網頁的外部布局。你可以使用它構建復雜的響應式設計。這就是為什么它被稱為“布局優先”。
Flexbox 主要幫助對齊內容和移動塊。
CSS Grid 用于二維布局，它適用于行和列。
Flexbox 僅在一維（行或列）中效果更好。
如果你同時使用兩者，將會節省更多時間。
相關文章
