如何結合 Flexbox 和 CSS 網格實現高效佈局

已發表: 2018-12-15

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

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

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

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

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

請記住，您永遠不應該在您的實時網站上進行更改。嘗試使用 Local，一個免費的本地 WordPress 開發應用程序。今天就下載吧！

如何使用 Flexbox 創建佈局

最近，我介紹了創建 Flexbox 卡片佈局的主題。那篇文章詳細介紹了 Flexbox 如何與特定的 CSS 信息一起工作，因此，如果您是 Flexbox 的初學者，它將幫助您熟悉它的工作原理。

對於本教程，這是我們將要構建的內容：

在 Codepen 上看到這個。

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

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

基本 HTML 結構

<div class="container">
        
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>

    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </aside>
        <section class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->

    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /container -->

如何使用柔性顯示

標題樣式

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

.container {
    display: flex;
    flex-direction: column;
}

使用display: flex;創建全角標題是非常自動的。（默認情況下，標頭是塊級元素）。由於這個聲明，它將允許輕鬆放置導航元素。

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

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

header{
    padding: 15px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

頁面內容樣式

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

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

.wrapper {
    display: flex;
    flex-direction: row;
}

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

.main {
    flex: 3;
    margin-right: 60px;
}

.sidebar {
   flex: 1;
}

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

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

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

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

在 Codepen 上看到這個。

網格模板區域

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

標題
主要內容
側邊欄
頁腳

基本 HTML 結構

<div class="container">
        
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
  
    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </aside>

    <section class="main">
        <h2></h2>
        <p></p>
         <p> </p>
  </section>

    <footer>
        <h3></h3>
        <p></p>
    </footer>

</div>

我們將在我們的網格容器上按順序定義這些區域，有點像將它們繪製出來。為了便於閱讀，我還將它們分開。

grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";

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

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

header{
    grid-area: header;
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

HTML 結構與 Flexbox 示例中的相同，但用於創建網格佈局的 CSS 完全不同。

.container{
    max-width: 900px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-gap: 50px;
}

要開始使用 CSS 網格佈局， display: grid; 設置在容器上。此處聲明了 grid-template-columns 以給出頁面的整體結構。還記得.main示例如何將 .main 類設置為 flex-grow 3，而側邊欄的 flex-grow 為 1 來確定大小嗎？此處的網格模板列已設置為 1fr 和 3fr。這是網格與分數單位形成的地方。有了這些值，很明顯有兩列，它們的寬度不相等。設置為 3fr 的列比另一個寬三倍。這解釋了側邊欄如何看起來比內容區域更窄。

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

header{
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

header button {
    justify-self: end;
}

導航放置在需要的位置：

header nav {
    justify-self: start;
}

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

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

現在我們已經了解了每種方法可以單獨執行的操作，是時候通過結合 Flexbox 和 CSS 網格佈局來創建更複雜的東西了。

在 Codepen 上看到這個。

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

在 Codepen 上看到這個。

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

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

.container {
  display: grid;
  grid-template-columns: 0.4fr 0.3fr 0.3fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

這種佈局又回來了分數單位，現在需要三個區域。第一個值 0.4fr 比第二個和第三個值稍寬，它們都是 0.3fr。

列和行佈局

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

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #d5c9e2;
}

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

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #55d4eb;
}

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

Grid Layout搭建好後，下一步就是微調內容了。

導航

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

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  color: #9f9c9c;
  text-transform: uppercase;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

此處將遵循相同的格式。徽標、菜單項和按鈕使用 Flexbox 的 justify-content 來設置間距。

列內容網格

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

帶有文本和按鈕的行內容

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

.extra {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ececec;
  justify-content: space-between;
}

一個 Flexbox 異常

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

.related-images {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 1rem;
}

.related-images .icon {
    background-color: white;
    flex: 1 1 150px;
}

設計方法總結

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

資源

Flexbox 和 CSS 網格佈局有很多很棒的資源，不勝枚舉。這裡有一些可以幫助您朝著正確的方向開始並激發您的佈局。

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

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

WordPress插件開發人員喜歡

找到一個可以加快網站開發速度的完美 WordPress 插件有點像試圖在一串代碼中找到一個錯字——這可能需要一些時間。如今，針對不同任務的插件如此之多，以至於很難準確確定站點需要（或不需要）哪些功能，以及哪些插件以有效的方式提供了這些功能。

下載此電子書以獲取我們最推薦給開發人員的插件列表！我們發現所有這些插件都易於使用，不會對您的網站造成太大影響，而且非常可靠。

準備好安裝您最喜歡的新插件了嗎？讓我們潛入吧！

如果你喜歡這篇文章，你應該通過這些學習另一種技能：

如何為您的作品集製作設計作品的動畫截圖
如何使用 CSS 創建 SVG 動畫
如何測試您的 WordPress 網站是否存在移動可用性問題
如何創建 WordPress 視頻庫