彈性佈局整理

彈性佈局
Flexible Box, 處理某元素內子元素的排列方式
頁面中任何一個元素均可以指定爲 彈性佈局

優勢，佈局快

缺點，兼容性差

 

圖片來自=》http://www.cnblogs.com/yangjie-space/p/4856109.html（若有侵權，當即刪除）。

 

屬性：display
取值：
一、flex
將塊級元素變爲彈性佈局容器
二、inline-flex
將行內元素變爲彈性佈局容器
兼容性:
display:-webkit-flex;
.......

注意：將元素設置爲flex後，子元素的float，clear以及vertical-align屬性將失效
一、基本概念
採用flex佈局的元素稱爲flex容器(flex Container)
他的子元素稱爲 flex 項目(flex Item)
Main axsis:主軸，默認爲橫向軸
Cross axsis:交叉軸，默認爲縱向軸

二、容器屬性
改組屬性要設置在容器元素上，用於統一控制子元素排列方式
一、flex-direction
做用：指定主軸的方向(決定項目的排列方式)
取值：
一、row
默認值，主軸爲橫軸，起點在左端
二、row-reverse
主軸爲橫軸，起點在右端
三、column
主軸爲交叉軸(縱向排列的軸) ， 起點在頂端
四、column-reverse
主軸爲交叉軸(縱向交叉的軸)，起點在底端
二、flex-wrap
做用：一行內顯示不下全部項目時，如何換行
取值：
一、nowrap
默認值，不換行，會將項目等比縮放
二、wrap
換行
三、wrap-reverse
換行，第一行在下方
三、flex-flow
做用：該屬性是 flex-direction 和 flex-wrap 的縮寫
取值：
一、默認值
row nowrap
二、direction wrap
四、justify-content
做用：該項目定義了項目在主軸上的對齊方式
注意：根據主軸的方向來決定效果
取值：
一、flex-start
主軸的起點對齊
二、flex-end
主軸的終點對齊
三、center
主軸的居中對齊
四、space-between (用的最多)
兩端對齊，每兩個項目之間的間隔相等
五、space-around
每一個項目兩側的間隔距離是相等的
五、align-items
做用：定義項目在交叉軸上是如何排列對齊的(主要針對一行項目)
取值：
一、flex-start
交叉軸起點對齊
二、flex-end
三、flex-center
四、baseline
基線對齊，第一行文本的基線(下方)
五、stretch
默認值，若是項目未設置高度或者高度爲auto時，
那麼將佔滿整個容器的高度
六、align-content
做用：容器具有多根軸線時(自動換行時)，項目的對齊方式
取值：
一、flex-start
項目在交叉軸起點對齊
二、flex-end
項目在交叉軸終點對齊
三、center
項目在交叉軸中間對齊
四、space-between
與交叉軸兩端對齊，軸線之間的間隔相等
五、space-around
每一個軸線兩端的間隔相等，軸線間的間隔比軸線與父元素邊框間隔大一倍
六、stretch
默認值，在不指定項目高度時，佔滿整個交叉軸

三、項目屬性
一、order
做用：排序，定義項目的排列順序。值越小，越靠前
取值：
默認爲0，自定義數值
二、flex-grow(重點一點)
做用：定義放大比例，若是當前排列軸有空餘空間，項目將如何放大
取值：正數數字
默認值爲 0 ，不作任何放大處理
只有取值爲1的元素，再有剩餘空間時候，將佔滿剩餘的空間

有多個元素取值爲1的時候，有剩餘空間時候，你們評分剩餘空間
三、flex-shrink
做用：該屬性定義了項目的縮小比例，默認爲1，就是空間不足時候，等比縮小
取值：
數字 ，
若是取值爲 0 ， 空間不足時不縮小
若是取值爲 1 ， 空間不夠時等比縮小
四、flex-basis
做用：指定項目所佔空間的大小
取值：
一、auto
默認值 項目自己大小
二、length
指定寬或高(取決於主軸的方向)
五、flex
做用：該屬性是， flex-grow，flex-shrink，flex-basis的簡寫模式
取值：
1 auto
至關於：1 1 auto
二、none
至關於：0 0 auto
三、flex-grow(必寫)，flex-shrink，flex-basis
六、align-self
做用:單獨定義當前元素與其餘元素不同的交叉軸對齊方式
能夠覆蓋 align-items 的值。默認爲 auto 即繼承父元素的 align-items
取值：
1 auto
自動，繼承父元素align-items
二、flex-start
交叉軸起點
三、flex-end
四、center
五、baseline
六、streth