快速掌握flex佈局
前言
flex佈局簡化了前端佈局問題，例如垂直居中，水平居中等，且目前爲止主流瀏覽器都支持了這種佈局，特別是移動端的瀏覽器，支持度更好。下面是在can i use上查詢的結果。從查詢的結果來看，支持IE10及以上瀏覽器，移動端幾乎全線支持！css
1、flex佈局是什麼？
flex佈局意思是「彈性佈局」，塊級元素和行內元素均可以設置爲flex佈局。html
DOM結構前端
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
...
</div>
複製代碼
塊級元素設置flex佈局web
.flex-container{
display:flex;
display: -webkit-flex; /* Safari */
display: -ms-flex; /* IE10+ */
}
複製代碼
行內元素設置flex佈局瀏覽器
.flex-container{
display:-webkit-inline-box;
display:-ms-inline-flexbox; /* IE10+ */
display:inline-flex; /* Safari */
}
複製代碼
2、flex佈局基本概念
flex佈局通常包含容器(flex-container)和若干個子元素（flex-item），佈局上分爲主軸和交叉軸。默認狀況下，水平方向爲主軸，垂直方向爲交叉軸，能夠經過設置flex-direction切換主軸和交叉軸（稍後會講解如何切換）。flex佈局的屬性比較多，但能夠歸類爲 容器屬性 和 子元素屬性，教程會先講解容器的屬性，而後講解子元素的屬性，這樣比較容易理解和記憶！網絡
3、flex容器的屬性
flex有6個屬性能夠設置，它們分別是：佈局
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction屬性
DOM結構字體
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
複製代碼
CSS樣式flex
.flex-container{
display:flex;
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
}
複製代碼
- row(默認值)，水平方向爲主軸，垂直方向爲交叉軸，起點在左邊。
- row-reverse: 水平方向爲主軸，垂直方向爲交叉軸，起點在右邊。
- column，垂直方向爲主軸，水平方向爲交叉軸，起點在上邊。
- column-reverse，垂直方向爲主軸，水平方向爲交叉軸，起點在下邊。
-
initial，初始值，和默認值效果同樣，這裏再也不貼圖。flexbox
-
inherit，繼承父容器的值，主要在嵌套使用flex佈局會用到，父容器設置什麼，它就是什麼，效果和上面的其中一種相同，這裏再也不貼圖
3.2 flex-wrap屬性
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
複製代碼
CSS樣式
.flex-container{
display:flex;
flex-wrap : nowrap | wrap | wrap-reverse | initial | inherit;
}
複製代碼
- nowrap(默認值)，即便子元素總寬高超出也不換行（列）。
- wrap，當子元素總寬高超出時自動換行（列）。
- wrap-reverse，換行，第一行在下方（列的狀況自行探索，再也不貼圖）。
- initial、inherit的效果和上面介紹的同樣，再也不贅述！
3.3 flex-flow屬性
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性，用於設置或檢索彈性盒模型對象的子元素排列方式。flex-direction 屬性規定方向， flex-wrap 屬性規定是否拆行或拆列。
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
複製代碼
CSS樣式
.flex-container{
display:flex;
flex-flow: flex-direction flex-wrap | initial | inherit;
}
複製代碼
- row wrap，表示水平方向，超出換行。
- row nowrap，表示水平方向，超出不換行。
- 其餘狀況也是同樣的，就是 flex-direction 和 flex-wrap 組合，這裏不作過多贅述。
3.4 justify-content屬性
justify-content屬性用於設置主軸上元素的排列方式。
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
複製代碼
CSS樣式
.flex-container{
display:flex;
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;
}
複製代碼
- flex-start（默認值），子元素靠容器開頭排列。
- flex-end，子元素靠結尾排列。
- center，子元素居中排列。
- space-between，兩端對齊，子元素之間的間隔相等。
- space-around，子元素的兩邊間隔相等。
3.5 align-items屬性
justify-content屬性用於設置交叉軸上元素的排列方式。
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
複製代碼
CSS樣式
.flex-container{
display:flex;
height: 300px; /* 設置高度，才能看到效果 */
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
複製代碼
- stretch (默認值)，子元素被拉伸以適應容器（1和2設置了高度，3沒有設置高度，下同）。
- center ，子元素在交叉軸上居中對齊。
- flex-start 子元素在交叉軸上靠起始邊對齊。
- flex-end 子元素在交叉軸上靠結束邊對齊。
- baseline 子元素在交叉軸上根據字體的baseline對齊（一、二、3字體大小分別爲20px、40px、60px）。
3.6 align-content屬性
align-content規定flex-container有剩餘空間時，如何分配給子元素。這個屬性設置的是全部子元素的對齊方式，須要設置flex-wrap(wrap或wrap-reverse)，而且指定flex-container的高度（或寬度）纔會生效。
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
複製代碼
CSS樣式
.flex-container{
display: flex;
background: #eeeeee;
align-content: center;
height: 300px;
flex-wrap: wrap | wrap-reverse;
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
}
複製代碼
- stretch(默認值)，子元素被拉伸以適應容器（臨時去掉了flex-item的高度）。
- center，子元素（總體）在交叉軸上居中對齊（恢復flex-item的高度爲100px，下同）。
- flex-start，子元素（總體）向交叉軸起始位置對齊。
- flex-end，子元素（總體）向交叉軸結束位置對齊。
- space-between ，子元素行（列）向交叉軸兩邊對齊（建議親自嘗試，文字功底很差，描述得很差~）。
- space-around ，子元素行（列）兩邊均分容器剩餘空間（建議親自嘗試，文字功底很差，描述得很差~）。
4、子元素（容器）的屬性
flex子屬性有6個屬性能夠設置，它們分別是：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">-1</div>
<div class="flex-item">0</div>
<div class="flex-item">未設置order</div>
</div>
複製代碼
CSS樣式
.flex-container{
display:flex;
}
.flex-item{
order: number | initial | inherit;
}
複製代碼
- number，能夠設置任意數字，數字越小越靠前（和DOM的位置無關）。
4.2 flex-grow屬性
- flex-grow屬性定義子元素的放大比例，默認爲0，即若是存在剩餘空間，也不放大；
DOM結構
<div class="flex-container">
<div class="flex-item">0</div>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
複製代碼
CSS樣式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item {
flex-grow: flex-grow: number | initial | inherit;
}
複製代碼
- number，能夠設置任何大於等於0的數字，數字越大，分到的剩餘空間比例就越大。
4.3 flex-shrink屬性
- flex-shrink屬性定義了子元素的縮小比例，默認爲1，即若是空間不足，該項目將縮小。負值對該屬性無效；
DOM結構
<div class="flex-container">
<div class="flex-item">0</div>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
複製代碼
CSS樣式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item {
background: #b48882;
flex-shrink: number | initial | inherit;
}
複製代碼
- number， 數值越大，縮小比例就越大。
4.4 flex-basis屬性
flex-basis屬性用於設置子元素的伸縮基準值，默認值爲auto，即元素自己的大小。若是子元素同時設置寬高和flex-basis屬性，flex-basis的優先級更高。
DOM結構
<div class="flex-container">
<div class="flex-item">width:100px</div>
<div class="flex-item">flex-basis: 200px;</div>
<div class="flex-item">flex-basis: 300px;</div>
<div class="flex-item">flex-basis: 400px;</div>
</div>
複製代碼
CSS樣式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item{
flex-basis: auto | number | initial | inherit;
}
複製代碼
- number，子元素設置的數值越大，佔用剩餘空間的比例越大。
4.5 flex屬性
flex屬性是flex-grow、flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。flex支持縮寫，例如常常用到的：flex: 1，等價於flex: 1 1 0%。
DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
複製代碼
CSS樣式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
margin: 5px;
flex: flex-grow [flex-shrink] [flex-basis] | auto | none | 1 | 0 | initial | inherit;
}
複製代碼
flex:1，等價於flex: 1 1 0%
flex: 0，等價於flex: 0 1 0%
flex: auto，等價於flex: 1 1 auto
flex: none，等價於flex: 0 0 auto
- 當取值爲一個具體值或百分比時，例如：
flex: 0%等價於flex: 1 1 0%，設置的是flex-basis的值
- 當 flex 取值爲兩個非負數字，則分別視爲 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，例如：
flex:2 3等價於flex 2 3 0%（下圖給第一個子元素設置flex:2 3）。
- 當 flex 取值爲一個非負數字和一個長度或百分比，則分別視爲 flex-grow 和 flex-basis 的值，flex-shrink 取 1。例如：
flex: 2 200px等價於flex: 2 1 200px（下圖給第一個子元素設置flex:2 200px）。
4.6 align-self屬性
align-self 容許單個子元素設置與其餘項目不同的對齊方式，默認值：auto。 DOM結構
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
複製代碼
CSS樣式
.flex-container {
display: flex;
background: #eeeeee;
height:300px;
}
.flex-item{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
margin: 5px;
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
複製代碼
- auto(默認值)，元素繼承了它的父容器的 align-items 屬性。若是沒有父容器則爲 "stretch"
- stretch ，元素被拉伸以適應容器（子元素2高度設置爲auto，align-self設置爲stretch）。
- center，元素位於容器的中心(子元素2的align-self設置爲center)。
- flex-start，元素位於容器的起始位置（子元素2的align-self設置爲center）。
- flex-end，元素位於容器的結束位置（子元素2的align-self設置爲end）。
- baseline ,元素以自身文字基線爲對齊方式，對齊到主軸中（子元素2align-self設置爲baseline ，
font-size:60px;height:auto）
最後，奉獻一個九宮格佈局的例子：codepen.io/linlif/pen/…，效果圖以下：
本文完
參考資料: 30 分鐘學會 Flex 佈局 Flex 佈局語法教程
相關文章
- 1. 快速掌握flex彈性盒子佈局
- 2. 五分鐘掌握Flex佈局
- 3. 快速掌握this
- 4. 快速掌握SpringMVC
- 5. Zookeeper快速掌握
- 6. 快速掌握Promise
- 7. 快速掌握dockerfile
- 8. 快速掌握ajax！
- 9. flex佈局——速記
- 10. Flex伸縮佈局快速入門
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 快速掌握flex彈性盒子佈局
- 2. 五分鐘掌握Flex佈局
- 3. 快速掌握this
- 4. 快速掌握SpringMVC
- 5. Zookeeper快速掌握
- 6. 快速掌握Promise
- 7. 快速掌握dockerfile
- 8. 快速掌握ajax！
- 9. flex佈局——速記
- 10. Flex伸縮佈局快速入門