如果需要使用伸縮布局首先得把display:flex;對于兼容還得加前綴display:-webkit-display:flex;等其他瀏覽器前綴，但我本機Chrome測試已經不需要加前綴了，其實這些還好，關鍵移動端竟然不支持這個屬性，移動端支持的還是老版本的display:-webki-box;不過對于學習來說，也不管它支持不支持了，學了再說吧，更何況Chrome已經把flex的前綴去了，說明flex多少還是有些穩定的。
下面列出了關于CSS與flex一起使用的一些屬性
-
display 顯示方式
-
flex-direction 設置flex模型的方向
-
justify-content 設置水平方向的對齊
-
align-items 設置垂直方向的對齊
-
flex-wrap 是否換行
-
align-content 設置換行后的對齊方式
-
flex-flow 簡寫flex-direction和flex-wrap
-
order 指定順序
-
align-self 覆蓋容器的對齊項目屬性
-
flex 指定長度
注意如果設置了寬度盒子是固定的。
彈性盒模型可以設置成·flex 或 inline-flex
display:flex
注意這個被固定住了，默認情況下，沿水平軸，從左至右
inline-flex和flex的效果是一樣的，也沒弄個所以然出來。
Flex的方向
flex-direction:屬性指定flex的方向。默認值是row（左到右，頂部到底部）
其他的值如下：
-
row-reverse- 從右到左，1在最右邊，2倒數第2....column- 垂直排列column-reverse- 垂直排列并且逆轉
row-reverse
column
column-reverse
水平對齊 --justify-content
可能的值如下：
-
flex-start- 默認值。被定位在容器的開頭flex-end- 被定位在容器的端部center- 被定位在容器的中心space-between- 項目定位與線之間的空間space-around- 項目是前定位成空間之間，并且所述線后
flex-end
center
space-between
space-around
垂直對齊--align-items
可能的值如下：
-
stretch- 默認值。項目被拉伸以適應父元素flex-start- 被定位在容器的頂部flex-end- 被定位在容器的底部center- 被定位在容器的中心baseline- 被定位在容器的基線
stretch
flex-start
flex-end
center
baseline
如果沒有足夠的空間指定是否換行--flex-wrap
可能的值如下：
-
nowrap- 默認值。不換行wrap- 換行wrap-reverse- 以相反的順序換行
nowrap
wrap
wrap-reverse
內容對齊--align-content
需要配合flex-wrap使用
可能的值如下：
-
stretch- 默認值。線路延伸到占用的剩余空間flex-start- 線路都擠滿朝著柔性容器的開始flex-end- 線路都擠滿朝著柔性容器的結束center- 線路都擠滿朝著柔性容器的中央space-between- 線條均勻地分布在Flex容器space-around- 線條均勻地分布在Flex容器，用半角空格的兩端
center
對這個不是很理解，待研究。
指定項目的順序--order
給第二個添加 order:-1
誰的數大，誰在后面
余量將所有額外的空間被吸收到該元素上--margin-right: auto
完美水平垂直居中
對每個子項目設置對齊--align-self
flex-start、flex-end、center、baseline、stretch
指定項目的范圍--flex
2，1，1
簡寫flex-direction 和 flex-wrap --flex-flow
flex-flow: row-reverse wrap;
這些還多少有些不完善，以后還會更新進來。
本文內容翻譯自：http://www.w3schools.com/
 |
不含病毒。www.avast.com |
留言列表
