如何結合 Flexbox 和 CSS 網格進行高效佈局

已發表: 2023-02-12

編者註：這篇客座文章是由 Abbey Fitzgerald 撰寫的，他是一位用戶體驗軟件工程師和網頁設計師，他熱愛編寫代碼的藝術。

過去，CSS 浮動屬性是在網站上排列元素的主要方法之一。如果您曾經以這種方式工作過，您就會知道它並不總是適合複雜的佈局。幸運的是，在現代網頁設計時代，由於 Flexbox 和 CSS 網格，對齊元素變得更加精簡。

當 Flexbox 出現時，它使對齊變得更加容易，並被廣泛採用。 CSS Grid Layouts 也在網頁設計社區中引起了很大的轟動。前一段時間，我們了解瞭如何創建基本的 CSS 網格佈局。雖然它沒有被廣泛採用，但瀏覽器開始支持它。當它得到全面支持時，這將對設計產生很大影響。瀏覽器支持一直在增加；請務必查看我可以使用以獲取最新信息。

現在您可能想知道接下來會發生什麼；畢竟，Flexbox 和 CSS Grid Layouts 似乎實現了相似的結果。然而，這不是 Flexbox 與 Grid 的爭論，而是更多地學習如何一起使用它們。我對 Grid 和 Flexbox 的使用越多，我發現您不必只選擇其中之一。在不久的將來，當 CSS Grid Layouts 擁有完整的瀏覽器支持時，設計師將能夠綜合利用各自的優勢，創造出最高效、最有趣的設計。

測試基本的 Flexbox 和 CSS 網格佈局

為了確定 Flexbox 或 CSS Grid 是否更適合您的開發工作流程，創建一個僅使用其中一個的標準佈局是了解它們如何工作以及兩者是否具有優勢的好方法。我們將從一個非常簡單且非常熟悉的佈局類型開始，其中包含頁眉、側邊欄、主要內容和頁腳。像這樣的簡單佈局是定位各種元素的快速方法。

請記住，您永遠不應該在您的實際網站上進行更改。請嘗試使用 Local，這是一款免費的本地 WordPress 開發應用程序。立即下載！

如何使用 Flexbox 創建佈局

最近，我介紹了創建 Flexbox 卡片佈局的主題。該帖子詳細介紹了 Flexbox 如何工作以及特定的 CSS 信息，因此如果您是 Flexbox 的初學者，它將幫助您熟悉它的工作原理。

對於本教程，我們將構建以下內容：

在 Codepen 上看到這個。

對於這個基本佈局，Flexbox 的主要任務包括：

創建全寬頁眉和頁腳
在主要內容區域旁邊放置側邊欄
側邊欄和主要內容區域的正確大小
導航元素定位

基本的 HTML 結構

<div 類="容器">
        
    <標題>
        <導航>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </導航>
        <按鈕></按鈕>
    </標題>
    <div 類="包裝器">
        <aside class="側邊欄">
            <h3></h3>
        </aside>
        <section class="主要">
            <h2></h2>
            <p></p>
        </節>
    </div><!-- /wrapper -->
    <頁腳>
        <h3></h3>
        <p></p>
    </頁腳>
</div><! -- /容器 -->

如何使用柔性顯示器

標題樣式

從外到內，添加display: flex; 到容器是任何 Flexbox 佈局的第一步。 flex-direction 設置為 column，因此這會將所有部分放置在彼此之下。

 。容器 {
    顯示：彈性；
    彈性方向：列；
}

使用display: flex; （標頭默認是塊級元素）。由於此聲明，它將允許輕鬆放置導航元素。

左側導航中有一個徽標和兩個菜單項，右側有一個登錄按鈕。導航在標題中，因此通過justify-content: space-between; 導航和按鈕將自動間隔。

一件方便的事情是對齊文本是多麼容易。在導航中，使用align-items: baseline; ，所有導航項都與文本的基線對齊，因此它們看起來更統一。

 標題{
    填充：15px；
    底部邊距：40px；
    顯示：彈性；
    證明內容：空格之間；
}
標題導航 ul {
    顯示：彈性；
    對齊項目：基線；
    列表樣式類型：無；
}

頁面內容樣式

接下來，是側邊欄和主要內容區域，以及包含兩者的包裝器。 class為.wrapper的div也需要display: flex; 但 flex-direction 與上面不同。因為側邊欄和內容區域彼此相鄰而不是堆疊在一起，所以 flex-direction 是

接下來，是側邊欄和主要內容區域，以及包含兩者的包裝器。 class為.wrapper的div也需要display: flex; 但 flex-direction 與上面不同。因為側邊欄和內容區域是相鄰的而不是堆疊在一起，所以 flex-direction 是行，這與上面容器中所做的相反。

 .wrapper {
    顯示：彈性；
    彈性方向：行；
}

主要部分和側邊欄的大小非常重要，因為這裡有更多突出的信息。主要內容應該是側邊欄大小的三倍，使用 Flexbox 很容易做到這一點。

 。主要的 {
    彈性：3；
    右邊距：60px；
}
側邊欄{
   彈性：1；
}

對於此代碼片段，我使用了速記。 flex 值用於 flex-grow 屬性。 Flex-grow 非常強大，因為這是項目相對於同一容器內其他靈活項目的增長量。

總的來說，Flexbox 在創建這種簡單佈局方面非常高效。控制列表項的樣式以及導航和按鈕之間的間距特別有用。

如何使用 CSS 網格佈局創建佈局

為了測試效率，下一步是使用 CSS Grid 構建相同的基本佈局。頁面元素完全相同，並且將以與 Flexbox 示例相同的方式定位。

在 Codepen 上看到這個。

網格模板區域

CSS Grid 的一個方便之處是能夠指定模板區域，這可以使定義佈局非常直觀。通過採用這種方法，網格上的區域可以被命名和引用以定位項目。對於這個基本佈局，我們需要命名四個項目：

標頭
主要內容
邊欄
頁腳

基本的 HTML 結構

<div 類="容器">
        
    <標題>
        <導航>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </導航>
        <按鈕></按鈕>
    </標題>
  
    <aside class="側邊欄">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </aside>
    <section class="主要">
        <h2></h2>
        <p></p>
         <p> </p>
  </節>
    <頁腳>
        <h3></h3>
        <p></p>
    </頁腳>
</div>

我們將按順序在我們的網格容器上定義這些區域，有點像把它們畫出來。為了便於閱讀，我也會將它們隔開。

 網格模板區域：
        “標題標題”
        “側邊欄主要”
        “頁腳頁腳”；

請注意側邊欄是如何列在 main 之前的？切換它們也會使頁面上的順序發生變化。目前，側邊欄在左側，主要內容在右側，但您可以根據需要輕鬆更改它。

需要注意的一件事：這些名稱需要“連接”到樣式。僅僅因為已經聲明了 grid-template-areas，我們不知道標頭實際屬於哪裡。在頁眉塊中， grid-area: header; 需要添加。

 標題{
    網格區域：標題；
    填充：20px 0；
    顯示：網格；
    網格模板列：1fr 1fr；
}

HTML 結構與 Flexbox 示例中的相同，但創建網格佈局的 CSS 有很大不同。

 。容器{
    最大寬度：900px；
    背景色：#fff；
    保證金：0自動；
    填充：0 60px；
    顯示：網格；
    網格模板列：1fr 3fr；
    網格模板區域：
        “標題標題”
        “側邊欄主要”
        “頁腳頁腳”；
    網格間隙：50px；
}

要開始使用 CSS 網格佈局，擁有display: grid;是非常重要的。裝在容器上。 grid-template-columns 在此處聲明以提供頁面的整體結構。還記得 Flexbox 示例是如何將.main類設置為 3 的 flex-grow 並且將側邊欄的 flex-grow 設置為 1 來確定大小的嗎？這裡 grid-template-columns 被設置為 1fr 和 3fr。這是用小數單位形成網格的地方。使用這些值，很明顯有兩列並且它們的寬度不相等。設置為 3fr 的列比其他列寬三倍。這解釋了側邊欄如何顯得比內容區域更窄。

接下來，需要針對錶頭調整用於容器的 fr 單位。網格模板列已調整為 1fr 和 1fr。這樣就有兩個大小相同的列，導航項和按鈕將適合。

 標題{
    網格區域：標題；
    顯示：網格；
    網格模板列：1fr 1fr；
}

Flywheel gird 和 flexbox layouts 佈局 grid header screenshot

要放置按鈕，我們只需要使用 justify-self 並將其設置為結束即可。

 標題按鈕{
    自我辯護：結束；
}

導航放置在需要的地方：

 標題導航{
    自我辯護：開始；
}

全角頁腳不需要設置不同的列，因為內容位於中間。

如何使用 Flexbox 和 CSS 網格創建佈局

現在我們已經了解了每個方法可以單獨做什麼，是時候通過組合 Flexbox 和 CSS 網格佈局來創建更複雜的東西了。

在 Codepen 上看到這個。

這是讓網格運行的基本大綱：

在 Codepen 上看到這個。

請注意設計如何同時依賴於列和行？這種佈局需要東西在兩個方向上排列一致並且表現一致，因此使用 CSS Grid 對整體佈局來說是有效的。

規劃是這樣佈局的關鍵。最好先勾勒出它的草圖，然後從字面上看事情是如何疊加的。開始代碼，顯示：網格；是必不可少的; 沒有它，使用這種類型的佈局將不起作用。這裡要注意的一件事是內容塊之間有間距。這是通過 grid-column-gap 和 grid-row-gap 實現的。

 。容器 {
  顯示：網格；
  網格模板列：0.4fr 0.3fr 0.3fr；
  網格列間隙：10px；
  網格行間距：15px；
}

此佈局返回分數單位，現在需要三個區域。第一個值 0.4fr 比第二個和第三個值略寬，它們都是 0.3fr。

列和行佈局

這是從一開始就參考圖表的重要之處。從頂部開始，這是頁眉的放置方式。它跨越所有列和一行。

 .header {
  網格列開始：1；
  網格列端：4；
  網格行開始：1；
  網格行尾：2；
  背景色：#d5c9e2；
}

如果要使用速記，則起始值和結束值在同一行並用斜線分隔。它看起來像這樣：

 .header {
  網格列：1 / 4；
  網格行：1 / 2；
  背景色：#55d4eb；
}

要放置所有其他項目，只需將適當的網格和列值添加到 CSS。這個例子在 Codepen 上，而不是在這裡一一介紹。

網格佈局構建完成後，下一步就是對內容進行微調。

導航

Flexbox 非常適合放置標題元素。基本佈局示例通過 justify-content: space-between 觸及了這一點。網格示例需要有 justify-self: start; 在導航和自我證明上：結束；用於放置東西的按鈕，但 Flexbox 使導航更容易間距。

 .header {
  網格列：1 / 4；
  網格行：1 / 2；
  顏色：#9f9c9c；
  文本轉換：大寫；
  border-bottom: 2px solid #b0e0ea;
  填充：20px 0；
  顯示：彈性；
  證明內容：空格之間；
  對齊項目：居中；
}

這裡將遵循相同的格式。徽標、菜單項和按鈕使用 Flexbox 的 justify-content 進行間距。

列內容網格

對於需要元素沿一個方向排列的場合，這意味著它更“一維”，通常 Flexbox 是更好的選擇。此外，Flexbox 擅長動態縮放元素。也許您已經通過添加display:flex; 在父元素上，在子元素上有 flex 屬性。使用該技術，形成了一條漂亮的線，這是確保所有元素高度相同的有效方法。

帶有文本和按鈕的行內容

在“額外內容”部分，添加了三個帶有文本和按鈕的區域。 Flexbox 可以很容易地保持三列的設置寬度。

 。額外的 {
  網格列：2 / 4；
  網格行：4 / 5；
  填充：1rem；
  顯示：彈性；
  彈性包裝：包裝；
  邊框：1px 實心#ececec；
  證明內容：空格之間；
}

一個 Flexbox 異常

是的，我確實說過 Flexbox 更適合一維佈局、網格或列，但是如果您閱讀瞭如何使用 Flexbox 創建現代 CSS 卡設計佈局帖子，則演示了“最後一行”Flexbox 技巧以保持行和列的平衡，即使卡片數量不是偶數。

 .related-images {
  網格列：1 / 3；
  網格行：5 / 6；
  顯示：網格；
  網格模板列：重複（4,1fr）；
  網格間隙：1rem；
}
.related-images .icon {
    背景色：白色；
    彈性：1 1 150 像素；
}

設計方法總結

基本上，我在這裡採用的方法是將 CSS 網格佈局用於整體佈局（以及任何非線性設計）。在網格內容區域內，Flexbox 用於對網格區域內的樣式進行排序和微調。

資源

關於 Flexbox 和 CSS Grid 佈局的資源太多了，不勝枚舉。這裡有一些可以讓您朝著正確的方向開始並激發您的佈局。

框對齊備忘單
Jen Simmons 的佈局實驗室
網格完整指南
Flexbox 完整指南

希望這些練習能讓您更好地了解如何使用 CSS 網格佈局和 Flexbox 構建佈局。您如何看待這些新技術？他們如何幫助您的開發過程？