摘要：代碼如下頁(yè)面內(nèi)容樣式接下來(lái)，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個(gè)包含起來(lái)。列和行布局部分橫跨所有的列。也可以使用簡(jiǎn)寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計(jì)方法總結(jié)以上的布局設(shè)計(jì)中，使用了來(lái)進(jìn)行整體布局以及設(shè)計(jì)中的非線性部分。

CSS 浮動(dòng)屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當(dāng)實(shí)現(xiàn)復(fù)雜布局時(shí)，這種方法不總是那么理想。幸運(yùn)的是，在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)時(shí)代，使用 Flexbox 和 CSS Grid 來(lái)對(duì)齊元素，變得相對(duì)容易起來(lái)。

使用 Flexbox 可以使元素對(duì)齊變得容易，因此 Flexbox 已經(jīng)被廣泛使用了。

同時(shí)，CSS Grid 布局也為網(wǎng)頁(yè)設(shè)計(jì)行業(yè)帶來(lái)了很大的便利。雖然 CSS Grid 布局未被廣泛采用，但是瀏覽器逐漸開始增加對(duì) CSS Grid 布局的支持。

雖然 Flexbox 和 CSS Grid 可以完成類似的布局，但是本次，我們學(xué)習(xí)的是如何組合使用這兩個(gè)工具，而不是只選擇其中的一個(gè)。在不久的將來(lái)，當(dāng) CSS Grid 布局獲得完整的瀏覽器支持時(shí)，設(shè)計(jì)人員就能夠利用每個(gè) CSS 組合的優(yōu)勢(shì)，來(lái)創(chuàng)建最有效和最有趣的布局設(shè)計(jì)。

我們從一個(gè)很簡(jiǎn)單且熟悉的布局類型開始，包括標(biāo)題，側(cè)邊欄，主要內(nèi)容和頁(yè)腳等部分。通過(guò)這樣一個(gè)簡(jiǎn)單的布局，來(lái)幫助我們快速找到各種元素的布局方法。

下面是需要?jiǎng)?chuàng)建的內(nèi)容：?

要完成這個(gè)基本布局， Flexbox 需要完成的主要任務(wù)包括以下方面：

創(chuàng)建完整寬度的 header 和 footer

將側(cè)邊欄放置在主內(nèi)容區(qū)域左側(cè)

確保側(cè)邊欄和主內(nèi)容區(qū)域的大小合適

確保導(dǎo)航元素定位準(zhǔn)確

Header 樣式

我們從外到內(nèi)，逐層開始設(shè)計(jì)，首先將 display: flex; 添加到 container，這也是所有 Flexbox 布局的第一步。接著，將 flex-direction 設(shè)置為 column，確保所有部分彼此相對(duì)。

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

通過(guò) display: flex; 自動(dòng)創(chuàng)建一個(gè)全寬的 header（header 默認(rèn)情況下是塊級(jí)元素）。通過(guò)這個(gè)聲明，導(dǎo)航元素的放置會(huì)變得很容易。

導(dǎo)航欄的左側(cè)有一個(gè) logo 和兩個(gè)菜單項(xiàng)，右側(cè)有一個(gè)登錄按鈕。導(dǎo)航位于 header 中，通過(guò) justify-content: space-between; 可以實(shí)現(xiàn)導(dǎo)航和按鈕之間的自動(dòng)間隔。

在導(dǎo)航中，使用 align-items: baseline; 能夠?qū)崿F(xiàn)所有導(dǎo)航項(xiàng)目與文本基線的對(duì)齊，這樣也使得導(dǎo)航欄看起來(lái)更加統(tǒng)一。

代碼如下:

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

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

頁(yè)面內(nèi)容樣式

接下來(lái)，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個(gè) wrapper 包含起來(lái)。具有 .wrapper 類的 div，也需要設(shè)置 display: flex; 但是 flex 方向與上述不同。這是因?yàn)閭?cè)邊欄和主內(nèi)容區(qū)域彼此相鄰而不是堆疊。

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

主內(nèi)容區(qū)域和側(cè)邊欄的大小設(shè)置非常重要，因?yàn)橹匾男畔⒍荚谶@里展示。主內(nèi)容區(qū)域應(yīng)該是側(cè)邊欄大小的三倍，使用 Flexbox 很容易實(shí)現(xiàn)這點(diǎn)。

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

.sidebar {
   flex: 1;
}

總的來(lái)說(shuō)，F(xiàn)lexbox 在創(chuàng)建這個(gè)簡(jiǎn)單的布局時(shí)，十分高效。尤其在控制列表元素樣式和設(shè)置導(dǎo)航與按鈕之間的間距方面，特別有用。

為了測(cè)試效率，接下來(lái)使用 CSS Grid 創(chuàng)建相同的基本布局。?

Grid 模板區(qū)域

CSS Grid 的方便之處在于，可以指定模板區(qū)域，這也使得定義布局變得非常直觀。采取這種方法，網(wǎng)格上的區(qū)域可以命名并引用位置項(xiàng)。對(duì)于這個(gè)基本布局，我們需要命名四個(gè)項(xiàng)目：

header

main content

sidebar

footer

基本 HTML 結(jié)構(gòu)

我們按照順序在 grid container 中定義這些區(qū)域，就像繪制它們一樣。

grid-template-areas:

??????? "header header"

??????? "sidebar main"

??????? "footer footer";

當(dāng)前側(cè)邊欄位于左側(cè)，主區(qū)域內(nèi)容位于右側(cè)，如果需要，也可以輕松更改順序。

有一件事要注意：這些名字需要“連接”到樣式上。所以需要在 header block 中，添加 grid-area: header;。

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

HTML 結(jié)構(gòu)與 Flexbox 示例中的相同，但 CSS 與創(chuàng)建網(wǎng)格布局完全不同。

使用 CSS Grid 布局時(shí)，在 container 中設(shè)置 display: grid; 非常重要。此處聲明 grid-template-columns，是為了確保頁(yè)面的整體結(jié)構(gòu)。這里 grid-template-column 已將側(cè)邊欄和主內(nèi)容區(qū)域大小設(shè)置為 1fr 和 3fr。fr 是網(wǎng)格的分?jǐn)?shù)單位。

.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;
}

接下來(lái)，需要調(diào)整 header 容器中的 fr 單元。將 grid-template-columns 設(shè)置為 1fr 和 1fr。這樣 header 中就有兩個(gè)相同大小的列，放置導(dǎo)航項(xiàng)和按鈕會(huì)很合適。

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

要放置按鈕，我們只需要將 justify-self 設(shè)置為 end。

header button {
    justify-self: end;
}

導(dǎo)航的位置按照以下方式設(shè)置：

header nav {
    justify-self: start;
}

最后，我們通過(guò)組合 Flexbox 和 CSS Grid 來(lái)創(chuàng)建更復(fù)雜的布局。

?

基本的布局如下圖所示：

這種布局需要在行和列兩個(gè)方向上保持一致，所以使用 CSS Grid 實(shí)現(xiàn)整體布局十分有效。

?

規(guī)劃對(duì)于布局的實(shí)現(xiàn)來(lái)說(shuō)，十分重要。

接下來(lái)看看代碼如何一步步實(shí)現(xiàn)。首先 display: grid; 是基本設(shè)置，其次內(nèi)容塊之間的間距，可以通過(guò) grid-column-gap 和 grid-row-gap 實(shí)現(xiàn)。

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

列和行布局

Header 部分橫跨所有的列。

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

也可以使用簡(jiǎn)寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。就像這樣：

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

完成網(wǎng)格布局的構(gòu)建之后，微調(diào)內(nèi)容就是下一步。

導(dǎo)航

Flexbox 非常適合放置 header 元素。基本的 header 布局需要設(shè)置 justify-content: space-between。

上面的 CSS Grid 布局示例中，需要在導(dǎo)航欄設(shè)置 justify-self：start;，在按鈕設(shè)置 justify-self: end;，但是如果使用 Flexbox，導(dǎo)航的間距會(huì)變得很容易設(shè)置。

.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;
}

列內(nèi)容網(wǎng)格

將所需的元素排列在一個(gè)方向上，意味所有元素都處在同一橫向維度，通常Flexbox是實(shí)現(xiàn)這種布局的更好選擇。此外，F(xiàn)lexbox 可以動(dòng)態(tài)調(diào)整元素。使用 Flexbox，可以將所有元素連成一條直線，這也確保了所有元素都具有相同的高度。

帶有文本和按鈕的行內(nèi)容

下圖是包含了“額外”文本和按鈕的三個(gè)區(qū)域。Flexbox 可以輕松設(shè)置三列的寬度。

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

以上的布局設(shè)計(jì)中，使用了 CSS Grid 來(lái)進(jìn)行整體布局（以及設(shè)計(jì)中的非線性部分）。對(duì)于網(wǎng)格內(nèi)容區(qū)域的設(shè)計(jì)，使用 Flexbox 進(jìn)行樣式的排序和微調(diào)會(huì)更容易實(shí)現(xiàn)。

原文鏈接：https://getflywheel.com/layou...

轉(zhuǎn)載請(qǐng)注明出自：葡萄城控件

葡萄城是全球控件行業(yè)領(lǐng)導(dǎo)者，世界領(lǐng)先的企業(yè)應(yīng)用定制工具、企業(yè)報(bào)表和商業(yè)智能解決方案提供商，為超過(guò)75%的全球財(cái)富500強(qiáng)企業(yè)提供服務(wù)。