**flex布局：**css3 彈性盒子(flexible box 或 flexbox)，是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可**地執行行/列。
對於學習flex布局我們得首先知道以下技術點：
–什麼是容器，什麼是專案，什麼是主軸，什麼是側軸？
–專案永遠排列在主軸的正方向上
–彈性盒子模型分老版與新版：
老版本的我們通常稱之為box：-webkit-box
新版本的我們通常稱之為flex：-webkit-flex / flex
flex-direction：控制主軸是哪一根，控制主軸的方向，即控制容器的布局方向及排列方向。
row：從左往右的x軸
row-reverse：從右往左的x軸
column從上往下的y軸
column-reverse：從下往上的y軸
富裕空間的管理：(只決定富裕空間的位置，不會給專案區分配空間)
主軸justify-content
flex-start：在主軸的正方向
flex-end: 在主軸的反方向
center：在兩邊
space-between：在專案之間
space-around：在專案兩邊
側軸align-items
flex-start：在側軸的正方向
flex-end：在側軸的反方向
center：在兩邊
baseline：基線對齊
stretch：等高布局（專案沒有高度）
**彈性空間的管理：**將富裕空間按比例分配到各個專案上
flex-grow屬性定義彈性盒子項（flex item）的拉伸因子，預設值為0。
可用空間 = (容器大小 - 所有相鄰專案flex-basis的總和)
可擴充套件空間 = (可用空間/所有相鄰專案flex-grow的總和)
每項伸縮大小 = (伸縮基準值 + (可擴充套件空間 x flex-grow值))
flex-shrink屬性指定了 flex 元素的收縮因子 預設值為1，只有在 flex-wrap:nowrap時才有作用
flex-basis指定了 flex 元素在主軸方向上的初始大小
預設值 ：auto 不可繼承，注意：在flex簡寫屬性中flex-basis的預設值為0
flex-wrap屬性控制了容器為單行/列還是多行/列。並且定義了側軸的方向，新行/列將沿側軸方向堆砌。
預設值：nowrap 不可繼承
值：nowrap | wrap | wrap-reverse
align-content屬性定義彈性容器的側軸方向上有額外空間時，如何排布每一行/列、也可理解為多行多列時,富裕空間的管理，會把所有行、列看成乙個整體。當彈性容器只有一行/列時無作用
預設值：stretch 不可繼承
flex-flow屬性是設定「flex-direction」和「flex-wrap」的簡寫，控制主軸和側軸的位置以及方向
預設值：row nowrap 不可繼承
order屬性規定了彈性容器中的可伸縮專案在布局時的順序。元素按照 order 屬性的值的增序進行布局。擁有相同 order 屬性值的元素按照它們在源****現的順序進行布局，order越大越後。
預設值：0 不可繼承
align-self會對齊當前 flex 行中的 flex 元素，並覆蓋 align-items 的值. 如果任何 flex 元素的側軸方向 margin 值設定為 auto，則會忽略 align-self。
預設值：auto 不可繼承
flex是 flex-grow，flex-shrink，flex-basis 的簡寫屬性
預設值 flex-grow: 0 不可繼承
flex-shrink: 1
flex-basis: auto
值flex: none;/* 0 0 auto /
關於flex布局
任何乙個容器都可以指定為flex 布局。box行內元素也可以使用flex布局。box需要注意的是，設為flex布局以後，子元素的float clear和vertical align屬性將失效弄清楚 幾個基本的概念 我們知道盒子模型 下面可以理解為 flex 模型 容器預設存在兩根軸 水平的主軸 ma...
flex布局學習
內容 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex...
flex布局學習
flex flexible box 是一種彈性布局，用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後，子元素的float clear和ver...