互聯網 - 大數據

如果需要使用伸縮布局首先得把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/