CSS Grid 或 Flexbox:哪個更適合創建列?

Leonard Strauss included in Programming Web Design Web Development Css

2023-09-10 558 words 3 minutes

Contents

當談到 CSS 佈局時，您可以使用的兩個主要工具是 Grid 和 Flexbox。雖然兩者在創建佈局方面都很出色，但它們的用途不同，並且具有不同的優點和缺點。

了解每種佈局方法所表現出的不同行為，以及應採用它們的環境。

CSS Flexbox 和 Grid 的不同行為

通過在所選目錄中生成“index.html”文件並在其中合併隨後的代碼片段，可以有效地傳達上述過程:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Flexbox vs Grid</h1>
    <h2>Flexbox:</h2>

    <div class="flex-container">
      <div>Lorem.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
    </div>

    <h2>Grid:</h2>

    <div class="grid-container">
      <div>Lorem.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
    </div>
  </body>
</html>

兩個部門都包含相同的後代，從而允許在每個部門內實施不同的方法並促進它們的比較。

您可能會發現 HTML 包含一個稱為“style.css”的樣式化文本文檔。在與“index.html”相同的目錄中構建此特定文件，並將後續設計插入其中:

 body {
  padding: 30px;
}

h1 {
  color: #A52A2A;
}

h2 {
  font-size: large;
}

div:not([class]) {
  outline: 2px solid black;
  padding: 0.5em;
}

您的頁面應如下所示:

要將初始 div 元素轉換為 CSS 文件中的靈活列，所需要做的就是將提供的標記合併到樣式表中。這將通過利用與 display 和 flex CSS 屬性關聯的屬性和屬性，有效地更改第一個 div 元素的佈局。

 .flex-container {
  display: flex;
}

這是結果:

Flex 容器採用一種稱為 Flexbox 的佈局策略，它將其子項排列在水平行或列中，可以動態調整以適應查看區域的尺寸。這種調整大小的能力是理解 Flexbox 原理的基礎，這構成了 Flexbox 在網頁設計中實用性的基礎。

為了緩解靈活容器內列溢出的潛在問題，建議使用“flex-wrap”屬性。

 .flex-container {
  display: flex;
  flex-wrap: wrap;
}

新的 CSS flexbox 屬性允許子元素在必要時流到多行，而不是像以前的版本那樣導致它們溢出或截斷，從而更有效地利用空間。這是通過實現一個靈活的容器來實現的，該容器具有根據其大小計算的可用空間，然後可以根據使用“flex-grow”、“flex-shrink”設置的各自大小和優先級在其子容器之間分配和“flex-basis”屬性。當可用空間不足以讓所有子元素出現在單行上時，通過允許這些子元素環繞並繼續出現在後續行中，此功能有助於優化佈局並避免固定寬度約束可能引起的潛在設計問題。

要為第二個元素實現基於網格的佈局，可以利用以下 CSS 規則:css.grid {display: grid;grid-template-columns: Repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 5px;}顯示:網格； 規則將“網格”佈局模型應用於.grid類，允許我們在其中定義行和列。 grid-template-columns 屬性指定我們要創建一個自動填充的網格，最小寬度為 200 像素，最大寬度為 1 分數（意味著每列佔用所需的空間）。最後，grid-gap屬性

 .grid-container {
  display: grid;
}

就目前而言，上述聲明本身不會產生任何效果，因為網格的標準操作導致其組成元素默認情況下垂直排列。

要從行佈局轉換為列佈局，需要修改grid-auto-flow屬性的值，默認為row。通過將此屬性更改為“column”，網格項將顯示在垂直列中，而不是水平行中。

 .grid-container {
  display: grid;
  grid-auto-flow: column;
}

現在結果如下:

要精確指定網格佈局中每行所需的列數，請使用 CSS 中的“grid-template-columns”屬性。

 .grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

為了實現具有多列等寬的佈局，在包裝內容方面與 Flexbox 的行為類似，可以利用響應式設計屬性，例如“自動調整”、“最小內容”和“最大內容”。

 .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

Flexbox 和 Grid 有時分別被描述為一維和二維佈局系統；然而，這種分類過於簡單化，因為 Flexbox 和 Grid 都具有創建二維佈局的能力，儘管它們在方法和限制方面存在差異。

事實上，調節排列的奇異維度至關重要。例如，考慮上述示例:

事實上，與 Flexbox 行/列中觀察到的變化相比，Grid 列的一致性值得注意。重要的是要認識到 Flex 容器中的每一行/列彼此獨立運行，從而導致根據它們包含的內容而導致大小上的潛在差異。因此，這些元素可以被視為不同的塊而不是傳統的列。

網格通過建立二維數組來獨特地操作，其中列被預設為保持固定。例如，包含簡潔內容的元素應與另一個包含大量文本的元素表現出一致的尺寸，如附圖所示。

從本質上講，與 Flexbox 相比，CSS Grid 提供了一種更有組織性的佈局設計方法，在創建動態用戶界面時提供了更大的適應性和響應能力。這兩個著名的佈局系統的名字再合適不過了。

何時使用 Flexbox

您是否願意根據內容利用各個列和行的固有尺寸，還是從父元素的角度對它們進行結構化控制?如果您選擇前者，Flexbox 提供了一個理想的解決方案。

為了說明這個概念，讓我們檢查一個假設的場景，其中我們有一個水平對齊的導航欄，位於開始和結束 HTML 標籤內。更新後的代碼將類似於以下內容:

 <h1>Flexbox vs. Grid</h1>

<header class="flex">
  <h2>Flexbox</h2>

  <nav>
    <ul class="nav-list">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Service Information Goes Here</a></li>
      <li><a href="">Blog Contact</a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

<header class="grid">
  <h2>Grid</h2>

  <nav>
    <ul class="nav-list">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Service Information Goes Here</a></li>
      <li><a href="">Blog Contact</a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

使用提供的代碼片段代替任何現有標記來修改級聯樣式表中的內容。

 .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

header {
  --border-width: 5px;
  border: var(--border-width) solid black;
  margin-bottom: 30px;
}

header > *:first-child {
  border: var(--border-width) solid #FFC0CB;
  margin: 0;
}

li {
  border: var(--border-width) solid #90EE90;
}

結果如下:

要創建靈活的導航，其中第一個菜單項在較小的屏幕上垂直堆疊，並使用CSS 網格在較大的屏幕上顯示為等寬的兩列，請將以下代碼添加到樣式表中: css/* Small Screens/@media (max-width: 768px) {.container {display: flex;justify-content: space-Between;}}/更大的屏幕*/@media (min-width: 769px) {.container {display: grid;grid-template-columns: 重複(2, auto);gap: 10px;}}對於列表樣式中的第二個菜單項，您可以使用相同的

 .flex .nav-list {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.grid .nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

通過比較結果來確定每種方法的有效性:

事實上，視覺表示說明了 Flexbox 如何滿足並排對齊元素的要求，同時保留其自然尺寸。相反，具有預定單元格大小的網格在應用於純文本鏈接時可能無法提供最佳外觀。

何時使用 CSS 網格

在父容器中的子元素需要固定結構的情況下，網格提供了明顯的優勢。例如，通過網格可以有效地實現排列一系列寬度一致的卡片，而不管其內容大小不同。

將標記內的標記替換為提供的代碼片段，其中包含一系列使用 HTML 和 CSS 創建網頁並設計網頁樣式的說明。

 <h1>Flexbox vs. Grids</h1>

<section class="cards">
  <h2>Some cards</h2>

  <div class="columns">
    <article class="card">
      <h3 class="card__title">Fun Stuff</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>

    <article class="card">
      <h3 class="card__title">Fun Stuff</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>

    <article class="card">
      <h3 class="card__title">A Longer Title Than Others</h3>

      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
         excepturi sit ea dolores totam veniam qui voluptates commodi,
         perferendis et!</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>
  </div>
</section>

添加這個CSS:

 .columns {
  display: flex;
  gap: 1em;
}

article {
  background-color: #90EE90;
  color: black;
  padding: 15px;
}

ul {
  background-color: white;
  padding: 2px;
  list-style: none;
}

最初的演示採用 Flexbox 佈局與網格佈局進行視覺比較。顯示結果如下:

事實上，值得注意的是，最後一列由於其固有的尺寸而呈現出更大的尺寸，而 Flexbox 佈局系統可以有效地管理這一尺寸。然而，為了利用 Flexbox 呈現具有統一寬度的所有列，必須通過採用以下方法來覆蓋這一固有測量:

 .columns > * {
  flex: 1;
}

當需要特定的元素排列時，網格佈局是一種有效的解決方案。通過指定列數，可以輕鬆實現所需的對齊方式，而無需使用複雜的 CSS 樣式或 JavaScript 操作。

 .columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

結果如下:

以這種方式使用網格還有一個額外的好處，因為它使父母能夠保持對孩子的佈局的控制。這意味著新的或刪除的子元素不會破壞整體結構。

那麼什麼時候應該使用 Grid 或 Flexbox?

高級英文版:網格佈局為父元素提供了組織良好的結構，提供了一致的列寬，在不同的內容大小上保持一致。

Flexbox 提供了一種自適應佈局，該佈局依賴於其組件的固有尺寸，使其非常適合靈活性和響應能力至關重要的情況。