参考网址：https://www.cnblogs.com/7z7chn/p/5782273.html

1、前言

很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因:

1. 感觉还比较新, 担心兼容性不好.

2. 普通的布局方式能满足我的绝大多数需求.

3. 好像蛮复杂的.

最近由于开发需要, 学习了下WeUI的实现, 发现里面大量使用了flex布局, 于是决定学习一下.

2、什么是flex

Flexbox Layout, 官方名为CSS Flexible Box Layout Module, 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的网格布局CSS Grid Layout Module). flex是flexible的缩写.

任何一个容器都可以指定为flex布局。

.box {display: flex;
}

行内元素也可以使用flex布局。

.box {display: inline-flex;
}

3、flex的基本概念

采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item).

flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis).

flex元素沿主轴从主轴起点 (main start)到主轴终点 (main end)依次排布.

如果flex容器包含多行flex元素, 则flex行 (flex lines)沿副轴从副轴起点 (cross start)到副轴终点 (cross end)依次排布.

单个flex元素占据的主轴空间叫做主轴长度 (main size), 占据的副轴空间叫做副轴长度 (cross size).

4、flex属性

下面就开始介绍与flex布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.

注意: 以下属性值都可以有initial(该属性的默认值)和inherit(继承自父元素), 本处省略.

5、用于flex容器的属性

这类属性有6种, 分别为: