參考文章:
flex 布局是什麼:如下：flex-content為容器，flex-item為專案；採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
class="flex-content">
class="flex-item">1div>
class="flex-item" >1div>
class="flex-item">1div>
div>1、容器的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2、專案的屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1、容器的屬性詳解
1.1flex-direction屬性
flex-direction屬性決定主軸的方向（即專案的排列方向）。
.box
預設情況下，專案都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.boxflex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.boxjustify-content屬性定義了專案在主軸上的對齊方式。
.boxalign-items屬性定義專案在交叉軸上如何對齊。
.boxalign-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.box2.1 order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item
.item
:nth-of-type(2)
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
.itemflex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.itemflex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
.itemflex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.itemalign-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
class="diew-item">
span>
首頁p>
div>
div>
body>
html>效果圖：
文末福利：
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
Flex彈性盒模型打破傳統css布局方式 容器篇
容器 父容器 justify content 設定子容器沿著主軸排列 位置排列 flex start 起始端對齊 flex end 末端對齊 center 居中對齊 分布排列 space between 首尾端到父級容邊距是子容器之間邊距的一半 space around 首尾端均勻對齊分步 alig...