手機網(wǎng)頁推薦使用，PC網(wǎng)頁建議做好兼容及回退機制，避免布局錯亂，總歸一句話：好用！

一.兼容性

五大主流新瀏覽器都支持，手機網(wǎng)頁兼容性較好，PC端建議做好回退機制；本文內(nèi)容未添加前綴，文尾有彩球。

兼容情況

二、具體使用

html片段

1.父元素屬性

(1) flex-direction:row | row-reverse | column | column-reverse; 子元素排列方式

(2)? flex-wrap:nowrap | wrap | wrap-reverse;??子元素是否可以換行

(3)? flex-flow:flex-direction || flex-wrap 前兩個屬性的簡寫方式

(4)? justify-content:flex-start | flex-end | center | space-between | space-around; 子元素的主軸對其方式

注意：

1.設(shè)為 flex 布局后，子元素的float、clear和vertical-align屬性將全部失效。

2.justify-content:space-between，兩端對齊，項目之間的間隔都相等。

3.justify-content:space-around，項目兩側(cè)的間距相等，項目之間的間距大一倍。

(5)?align-items:flex-start | flex-end | center | baseline | stretch（默認值）;?子元素的交叉軸對其方式

注意：

align-items:baseline，子元素第一行文字的基線對齊。

align-items:stretch：如果子元素未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

(6)?align-content:flex-start | flex-end | center | space-between | space-around | stretch; 多軸線對齊方式

注意：

多根軸線的對齊方式，如果子元素只有一根軸線，該屬性不起作用。

2.子元素屬性

(1) order:決定子元素排列的前后，數(shù)值越小，越靠前，默認為0；

(2) flex-grow:放大子元素比例；

(3) flex-shrink:子元素縮小比例，默認為1；如果一個字元素的flex-shrink屬性為0，改子元素不縮小；

(4) flex-basis:*px/auto ，可以定義該子元素寬度，最大值 = father寬 - 其它項目的最小寬度；

(5) flex:flex-grow,?flex-shrink?和?flex-basis的簡寫；

? ? ?默認值：?0 1 auto， 快速值auto?(1 1 auto) 和 none (0 0 auto)

(6) align-self:允許單個子元素有與其他字元素不一樣的對齊方式。

注意：

1.可覆蓋align-items屬性。

2.默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

3.思考題

? 怎么實現(xiàn)這個布局？

骰子

4.福利

a.如果你的項目是mvc框架配合webpack及postcss的話，可以忽略這個工具;如果不是，你可以考慮使用：前綴添加在線工具；

b.你也可以下載引入flex.css，參考?flex.css介紹及下載。

文章部分內(nèi)容來自：阮一峰flex講解