不要再错过flex布局了

手机网页推荐使用，PC网页建议做好兼容及回退机制，避免布局错乱，总归一句话：好用！

一.兼容性

五大主流新浏览器都支持，手机网页兼容性较好，PC端建议做好回退机制；本文内容未添加前缀，文尾有彩球。

兼容情况

二、具体使用

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.设为 flex 布局后，子元素的float、clear和vertical-align属性将全部失效。

2.justify-content:space-between，两端对齐，项目之间的间隔都相等。

3.justify-content:space-around，项目两侧的间距相等，项目之间的间距大一倍。

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

注意：

align-items:baseline，子元素第一行文字的基线对齐。

align-items:stretch：如果子元素未设置高度或设为auto，将占满整个容器的高度。

(6) align-content:flex-start | flex-end | center | space-between | space-around | stretch; 多轴线对齐方式

注意：

多根轴线的对齐方式，如果子元素只有一根轴线，该属性不起作用。

2.子元素属性

(1) order:决定子元素排列的前后，数值越小，越靠前，默认为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.思考题

  怎么实现这个布局？

骰子

4.福利

a.如果你的项目是mvc框架配合webpack及postcss的话，可以忽略这个工具;如果不是，你可以考虑使用：前缀添加在线工具；

b.你也可以下载引入flex.css，参考 flex.css介绍及下载。

文章部分内容来自：阮一峰flex讲解

作者：提小莫
链接：https://www.jianshu.com/p/c800387953e1