06 CSS3佈局-上（前端必須掌握）

如下主要參考了http://www.ruanyifeng.com/blo... 和 https://developer.mozilla.org... 兩篇文章。若是還想更詳細的能夠看一看這兩篇文章。大鵬一日同風起，扶搖直上九萬里！一塊兒學習，一塊兒進步！

CSS佈局

傳統方案是基於盒裝模型，依賴display屬性+position屬性+float屬性，但對於一些特殊佈局（eg:垂直居中）就不容易實現。

補充：
塊元素：出如今另外一個元素下面的元素；
內聯元素：出如今另外一個元素旁邊的元素，就像段落中的單個單詞同樣；

dispaly屬性一些默認的display的值，段落之間樣式默認值爲：display:block；<a>元素默認爲display:inline。

注： display:flex和 display:grid在佈局上比較重要。

一、Flex佈局

• 彈性盒子(Flexbox)

用於建立橫向/縱向的一維頁面佈局，在其父元素上應用display:flex，全部直接子元素機會按照flex進行佈局，可是子元素的float,clear,vertical-align屬性將失效。

任何一個容器均可指定爲flex佈局。

.box {
   display: flex;
}
<div class="box">
    <div class="box1">one</div>
    <div class="box2">two</div>
    <div class="box3">three</div>
</div>

.box {
   display: flex;
}
.box > div {
    flex:1
}
<div class="box">
    <div class="box1">one</div>
    <div class="box2">two</div>
    <div class="box3">three</div>
</div>

.container{
    display:flex;
    flex-wrap: wrap; /*可換行*/
    justify-content:center;
}
.item{
    flex: 0 1 150px;
    margin: 5px; /*外邊距*/
}

flex：是 flex-grow、 flex-shrink、 flex-basis的合併形式。

二、Grid佈局

• 用於同時在兩個維度把元素按行和列排列整齊。grad-template-rows和grid-template-columns定義了行和列的軌道。grid-gap定義了網格間的間距。

Grid 佈局只對項目生效，不對項目子元素起做用。

以下代碼：

.box {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grad-template-rows: 100px 100px;
    grid-gap:10px;
}
<div class="box">
    <div class="box1">one</div>
    <div class="box2">two</div>
    <div class="box3">three</div>
    <div class="box1">one</div>
    <div class="box2">two</div>
</div>

注：
a. fr單位跨網格軌道可用空間的分佈。上面代碼中有着3個大小爲 1fr的軌道的網格容器，建立了三個列軌道；
b.若最後一個是 2fr，則表示最後一個軌道是前者的二倍；
c.還能夠與絕對單位結合使用，eg:
grid-template-columns: 150px 1fr 2fr;表示第一列寬是150像素，第三列寬是第二列寬的2倍;
d. grid-template-columns: 150px auto 150px;auto 表示由瀏覽器本身決定

• 默認狀況下，容器元素都是塊級元素，但也能夠設爲行內元素。以下代碼，就是指定了div是一個行內元素，該元素內部採用網格佈局：

div{display: inline-grid;}

注：設爲網格佈局後，容器子元素（項目）的 float、 display:inline-block、 display:table-cell、 vertical-align和 column-*等設置都將失效。

• 容器指定了網格佈局後，就要劃分行和列了。

  列寬：grid-template-columns
  行高：grid-template-rows

代碼以下：

.container {
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
}

上面代碼指定了一個三行三列的網格，列和寬都是100px,固然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，當容器大小不肯定時能夠用。

• 比較經常使用的佈局

兩欄佈局：

grid-template-columns: minmax(150px,25%) 1fr;

表示第一列寬度最小爲150px，最大寬度爲總寬度的25%。

三明治佈局
grid-template-rows：auto 1fr auto;
垂直劃分爲上中下三部分（頁眉、內容區、頁腳），頁眉和頁腳都是原本的內容高度，內容區是剩下全部的高度。

聖盃佈局（最經常使用）
是將三明治佈局中的內容區分紅三部分（左邊欄、主欄、右邊欄）

html代碼：

<div class="container">
    <header/>
    <div>
    <main/>
    <div/>
    <footer/>
</div>

CSS代碼：

.container{
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

表示垂直方向（頁眉和頁腳都是自己內容高度，內容區佔滿剩餘的高度），水平方向（左邊欄和右邊欄都是自己內容高度，中間主欄佔滿剩餘的高度）。

十二網格佈局：

grid-template-columns: repeat(12, 1fr);

一些經常使用的網格屬性

---

• 行間距：grid-row-gap
• 列間距：gid-column-gap
• 合併寫法：grid-gap

---

• 設置單元格內容的水平位置：justify-items
• 設置單元格內容的垂直位置：align-items
• 合併寫法：place-items

---

• 整個內容區域在容器裏面的水平位置：justify-content
• 整個內容區域在容器裏面的垂直位置：align-content
• 合併寫法：place-content

---

• grid-column：1/3等同於grid-column: 1/span 2表示從第一根列線到第三根列線（即第一列和第二列）
• grid-row：1/span 2，第一根行線，橫跨兩個網格，（即表示第一行和第二行）
• grid-area：指定項目放在哪一個區域

如不完善之處，評論區歡迎您！