弹性布局的设置

一，弹性布局

 flex就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性
任何一个容器都可以指定为flex布局

.box{ display: flex; }

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

.box{ display: inline-flex; }

内核的浏览器，必须加上-webkit前缀。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二，概念，术语

首先，我们需要了解一下 Flex 布局中的一些概念和术语：
flex 容器（flex container）
flex 项目（flex item）
主轴（main axis)
交叉轴（cross axis）
占用主轴空间（main size）
占用交叉轴空间（cross size）
线轴起止点（main start、main end、cross start、cross end）

关系图

三，应用在 flex container 上的属性

1. flex-direction: 设置主轴(main axis)的方向

2. flex-warp: 设置 flex-items 是否可以换行

3. flex-flow: flex-direction flex-warp 属性连写

4. justify-content: 设置 flex items 在主轴(main axis)上的对齐方式

5. align-items: 设置 flex items 在交叉轴上的对齐方式(一般针对单行)

6. align-content: 设置 flex items 在交叉轴上的对齐方式(一般针对多行)

四，应用在 flex items 上的属性

1. order: 设置 flex items 的排列顺序

2. flex-grow: 决定了 flex items 在主轴方向上如何扩展

3. flex-shrink: 决定了 flex items 在主轴方向上如何收缩

4. flex-basis: 设置 flex items 在主轴上的 base size

5. flex: flex-grow flex-shrink? || flex-basis 连写

6. align-self: 允许 flex items 覆盖 flex-container 设置的 align-items 属性