CSS佈局：Flex和Grid

CSS中佈局是很重要的一部分，從一個元素塊的水平居中、垂直居中或者水平垂直居中，再到整個頁面的常規佈局、聖盃佈局、雙飛翼佈局等等。這些佈局有的只須要CSS比較常規寫法就能夠完成，不過有的仍是須要一些特殊技巧的。可是Flex和Grid的出現，讓頁面佈局變的簡單並且靈活。

Flex

屬性介紹

Flex相關的CSS屬性能夠分爲兩大類：Flex容器屬性和Flex子項屬性

Flex容器指設置了display: flex的元素。Flex子項指Flex容器的子元素。

建議配合Playround來了解各個屬性

Flex容器屬性

屬性涉及到的有：主軸方向、換行、主軸側軸對齊，多行對齊。（主軸側軸能夠簡單理解爲行列，但不是對應的，主軸也能夠是列）

• display
  將元素定義爲flex佈局 取值：flex | inline-flex

• flex-direction
  用於指定Flex主軸的方向，繼而決定 Flex子項在Flex容器中的位置
  取值：row | row-reverse | column | column-reverse

• flex-wrap
  用於指定Flex子項是否換行
  取值：nowrap | wrap | wrap-reverse

• flex-flow
  複合屬性，是flex-direction 和 flex-wrap 的簡寫屬性，是用於指定Flex子項的排列方式

• justify-content
  用於指定主軸上Flex子項的對齊方式 取值：flex-start | flex-end | center | space-between | space-around

• align-items
  用於指定側軸(垂直方向)上Flex子項的對齊方式
  取值：stretch | flex-start | flex-end | center | baseline

• align-content
  該屬性只做用於多行的狀況下，用於多行的對齊方式
  取值：stretch | flex-start | flex-end | center | space-between | space-around

Flex容器的子元素

屬性涉及到：排列順序、空間分配、對齊

• order
  該屬性用來指定Flex子項的排列順序，數值越小，越靠前，能夠爲負數
  取值：數值，默認值爲0

• flex-grow
  用來指定Flex子項的擴展比例，不能夠爲負數，Flex容器會根據Flex子項設置的擴展比例做爲比率來分配剩餘空間
  取值：數值，默認值爲0，表示即便存在剩餘空間，Flex子項也不會擴展

• flex-shrink
  用來指定Flex子項的收縮比例，不能夠爲負數，Flex容器會根據Flex子項設置的收縮比例做爲比率來收縮各個Flex子項
  取值：數值，默認值爲1，表示全部子項在剩餘空間爲負數時，等比例收縮

• flex-basis 用來指定Flex子項的佔據的空間，不能夠爲負數 取值：auto | length | percentage | content

• flex
  複合屬性，是flex-grow 、 flex-shrink 和 flex-basis 的簡寫屬性，用來指定Flex子項如何分配空間
  取值：none | 各拆分項屬性

  • none：0 0 auto
  • auto：1 1 auto
  • 1：1 1 0%
  • 0 auto 或 initial：0 1 auto 即初始值

• align-self
  用來單獨指定某Flex子項的對齊方式
  取值：auto | flex-start | flex-end | center | baseline | stretch

實例

垂直居中

垂直居中的寫法有不少，用flex也能夠實現

.parent {
    display: flex;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
}
.child {
    width: 50px;
    height: 50px;
    margin: auto;  /* 關鍵點 */
    background-color: #FF9800;
}
複製代碼

製做Header

製做一個以下圖的Header，常規方法多是左邊一個nav，右邊的按鈕使用float來居右。如今能夠思考下用flex怎麼實現。

<style> .header { display: flex; width: 520px; height: 36px; line-height: 36px; color: white; background-color: #03A9F4; border: 1px solid #ccc; } .header div { padding: 0 10px } .header div:last-child { margin-left: auto } </style>
<header class="header">
  <div>Home</div>
  <div>Search</div>
  <div>Logout</div>
</header>
複製代碼

實現：header元素設置display: flex, header的子元素會沿着主軸方法排列，最後一個元素設置margin-left: auto來居右。

製做評價欄

製做一個評價欄，左右兩個都是寬度都是自適應的，中間輸入框的寬度隨着兩邊而變化。常規作法的話可能須要js來配合完成。使用flex的話能夠輕鬆完成這個佈局。

<style> .flex .bottom-bar { display: flex; width: 520px; height: 32px; line-height: 32px; padding: 6px 10px; border: 1px solid #ccc; margin-bottom: 10px } .flex .bottom-bar__description { padding: 0 8px; } .flex .bottom-bar__input { flex: 1 } .flex .bottom-bar__input input{ width: 100% } .flex .bottom-bar__praise { padding: 0 8px; } </style>
<div class="bottom-bar">
  <div class="bottom-bar__description">你的評價</div>
  <div class="bottom-bar__input">
    <input type="text">
  </div>
  <div class="bottom-bar__praise">
    <button class="praise__thumb-up">點贊</button>
    <button class="praise__flower">送花</button>
  </div>
</div>
複製代碼

實現：把bottom-bar設置爲flex佈局，而後其餘正常佈局，在空間分配方面，輸入框佔用全部的剩餘空間，左右兩邊自適應便可。

Grid

相關概念

一樣的Grid相關的CSS屬性能夠分爲兩大類：Grid容器屬性和Grid子項屬性

Grid容器指設置了display: grid的元素。Grid子項指Grid容器的子元素。

除了上面兩個概念，還要介紹一些其餘相關術語。

• 網格線：用於分割行列的水平或者垂直的線

• 網格單元：網格系統的一個單元

• 網格區域: 四條網格線圍成的一個區域，包含多個網格單元

• 網格軌道：兩條網格造成的一個區域

• 網格行：網格系統中一行

• 網格列：網格系統中一列

• 網格間隙：行或者列之間的空隙

屬性介紹

Grid屬性比較多，這邊粗略介紹下屬性大致做用，要具體瞭解能夠看這篇文章

Grid容器

Grid容器屬性主要這幾個方面：定義行、列、區域，定義網格線大小、網格項內容的對齊，網格容器對齊、隱式網格

Grid項

Grid項主要有這幾個方面：定義佔據的網格空間、對齊

實例

頁面佈局

對於下面這種頁面佈局，常規的的模式就劃分出大模塊，而後在細分模塊佈局。使用Grid佈局會讓這一切變得簡單起來。

<style> .grid-layout { display: grid; width: 800px; height: 600px;; grid-gap: 10px; grid-template-columns: 1fr 5fr 2.5fr; grid-template-rows: 1fr 5fr 1fr; grid-template-areas: "header header header" "sidebar main aside" "sidebar footer footer"; } header, aside, .content, .content-aside, footer{ background: #ffbf66; border: 2px solid #555 } header { grid-area: header } aside { grid-area: sidebar } .content { grid-area: main } .content-aside { grid-area: aside } footer { grid-area: footer } </style>
<div class="grid-layout">
    <header></header>
    <aside></aside>
    <div class="content"></div>
    <div class="content-aside"></div>
    <footer></footer>
</div>
複製代碼

實現：在Grid容器上定義行列數據，同時在對網格區域進行劃分，最後只要子項設置爲對應的區域便可。

Flex VS Grid

Flexbox 多用於一維佈局， Grid 多用於二位佈局

就如上述的例子，Flexbox適合用於佈局Header這樣的模塊，而對於整個頁面的佈局來講，使用Grid更合適。

總結

Flex和Grid的出現，讓頁面佈局變的簡單並且靈活。可是實際項目仍是要考慮兼容性問題。

最後推薦個遊戲化學習的課堂：FLEXBOX FROGGY、Grid GARDEN

參考

• CSS Flex佈局屬性整理
• CSS Grid 佈局徹底指南(圖解 Grid 詳細教程)
• INTRODUCTION TO CSS GRID LAYOUT