如何使用Flexbox和CSS Grid，實現(xiàn)高效布局
CSS 浮動屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當實現(xiàn)復(fù)雜布局時，這種方法不總是那么理想。幸運的是，在現(xiàn)代網(wǎng)頁設(shè)計時代，使用 Flexbox 和 CSS Grid 來對齊元素，變得相對容易起來。
使用 Flexbox 可以使元素對齊變得容易，因此 Flexbox 已經(jīng)被廣泛使用了。
同時，CSS Grid 布局也為網(wǎng)頁設(shè)計行業(yè)帶來了很大的便利。雖然 CSS Grid 布局未被廣泛采用，但是瀏覽器逐漸開始增加對 CSS Grid 布局的支持。
雖然 Flexbox 和 CSS Grid 可以完成類似的布局，但是本次，我們學(xué)習(xí)的是如何組合使用這兩個工具，而不是只選擇其中的一個。在不久的將來，當 CSS Grid 布局獲得完整的瀏覽器支持時，設(shè)計人員就能夠利用每個 CSS 組合的優(yōu)勢，來創(chuàng)建最有效和最有趣的布局設(shè)計。
測試 Flexbox 和 CSS Grid 的基本布局
我們從一個很簡單且熟悉的布局類型開始，包括標題，側(cè)邊欄，主要內(nèi)容和頁腳等部分。通過這樣一個簡單的布局，來幫助我們快速找到各種元素的布局方法。
下面是需要創(chuàng)建的內(nèi)容：
要完成這個基本布局， Flexbox 需要完成的主要任務(wù)包括以下方面：
- 創(chuàng)建完整寬度的 header 和 footer
- 將側(cè)邊欄放置在主內(nèi)容區(qū)域左側(cè)
- 確保側(cè)邊欄和主內(nèi)容區(qū)域的大小合適
- 確保導(dǎo)航元素定位準確
基本 HTML 結(jié)構(gòu)
- <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 -->
使用 Flexbox 創(chuàng)建布局
Header 樣式
我們從外到內(nèi)，逐層開始設(shè)計，首先將 display: flex; 添加到 container，這也是所有 Flexbox 布局的***步。接著，將 flex-direction 設(shè)置為 column，確保所有部分彼此相對。
- .container {
- display: flex;
- flex-direction: column;
- }
通過 display: flex; 自動創(chuàng)建一個全寬的 header(header 默認情況下是塊級元素)。通過這個聲明，導(dǎo)航元素的放置會變得很容易。
導(dǎo)航欄的左側(cè)有一個 logo 和兩個菜單項，右側(cè)有一個登錄按鈕。導(dǎo)航位于 header 中，通過 justify-content: space-between; 可以實現(xiàn)導(dǎo)航和按鈕之間的自動間隔。
在導(dǎo)航中，使用 align-items: baseline; 能夠?qū)崿F(xiàn)所有導(dǎo)航項目與文本基線的對齊，這樣也使得導(dǎo)航欄看起來更加統(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;
- }
頁面內(nèi)容樣式
接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個 wrapper 包含起來。具有 .wrapper 類的 div，也需要設(shè)置 display: flex; 但是 flex 方向與上述不同。這是因為側(cè)邊欄和主內(nèi)容區(qū)域彼此相鄰而不是堆疊。
- .wrapper {
- display: flex;
- flex-direction: row;
- }
主內(nèi)容區(qū)域和側(cè)邊欄的大小設(shè)置非常重要，因為重要的信息都在這里展示。主內(nèi)容區(qū)域應(yīng)該是側(cè)邊欄大小的三倍，使用 Flexbox 很容易實現(xiàn)這點。
- .main {
- flex: 3;
- margin-right: 60px;
- }
- .sidebar {
- flex: 1;
- }
總的來說，F(xiàn)lexbox 在創(chuàng)建這個簡單的布局時，十分高效。尤其在控制列表元素樣式和設(shè)置導(dǎo)航與按鈕之間的間距方面，特別有用。
使用 CSS Grid 創(chuàng)建布局
為了測試效率，接下來使用 CSS Grid 創(chuàng)建相同的基本布局。
Grid 模板區(qū)域
CSS Grid 的方便之處在于，可以指定模板區(qū)域，這也使得定義布局變得非常直觀。采取這種方法，網(wǎng)格上的區(qū)域可以命名并引用位置項。對于這個基本布局，我們需要命名四個項目：
- header
- main content
- sidebar
- footer
基本 HTML 結(jié)構(gòu)
- <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 container 中定義這些區(qū)域，就像繪制它們一樣。
grid-template-areas:
“header header”
“sidebar main”
“footer footer”;
當前側(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)格布局完全不同。
- .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 Grid 布局時，在 container 中設(shè)置 display: grid; 非常重要。此處聲明 grid-template-columns，是為了確保頁面的整體結(jié)構(gòu)。這里 grid-template-column 已將側(cè)邊欄和主內(nèi)容區(qū)域大小設(shè)置為 1fr 和 3fr。fr 是網(wǎng)格的分數(shù)單位。
接下來，需要調(diào)整 header 容器中的 fr 單元。將 grid-template-columns 設(shè)置為 1fr 和 1fr。這樣 header 中就有兩個相同大小的列，放置導(dǎo)航項和按鈕會很合適。
- 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;
- }
使用 Flexbox 和 CSS Grid 創(chuàng)建布局
***，我們通過組合 Flexbox 和 CSS Grid 來創(chuàng)建更復(fù)雜的布局。
基本的布局如下圖所示：
這種布局需要在行和列兩個方向上保持一致，所以使用 CSS Grid 實現(xiàn)整體布局十分有效。
規(guī)劃對于布局的實現(xiàn)來說，十分重要。
接下來看看代碼如何一步步實現(xiàn)。首先 display: grid; 是基本設(shè)置，其次內(nèi)容塊之間的間距，可以通過 grid-column-gap 和 grid-row-gap 實現(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é)束值位于同一行上，并用斜杠分隔。就像這樣：
- .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)航的間距會變得很容易設(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)格
將所需的元素排列在一個方向上，意味所有元素都處在同一橫向維度，通常Flexbox是實現(xiàn)這種布局的更好選擇。此外，F(xiàn)lexbox 可以動態(tài)調(diào)整元素。使用 Flexbox，可以將所有元素連成一條直線，這也確保了所有元素都具有相同的高度。
帶有文本和按鈕的行內(nèi)容
下圖是包含了“額外”文本和按鈕的三個區(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è)計方法總結(jié)
以上的布局設(shè)計中，使用了 CSS Grid 來進行整體布局(以及設(shè)計中的非線性部分)。對于網(wǎng)格內(nèi)容區(qū)域的設(shè)計，使用 Flexbox 進行樣式的排序和微調(diào)會更容易實現(xiàn)。
