## 多列布局
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。
格式举例：
```css
.wrapper{
/* 分成几列 */
-webkit-column-count: 3;
/* 每列之间，用分割线隔开 */
-webkit-column-rule: 1px dashed red;
/* 设置列之间的间距 */
-webkit-column-gap: 60px;
/* 设置每一列的宽度 */
/* -webkit-column-width: 400px; */
/*-webkit- -moz- -ms- -o-*/
}
h4{
/* 设置跨列：让h4这标题位于整个文本的标题，而不是处在某一列之中*/
-webkit-column-span: all;
text-align: center;
}
```
备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。
## flex：伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
20180219_2035.png
如上图所示，有几个概念需要了解一下：
- 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
### 设置伸缩布局的步骤
（1）指定一个盒子为伸缩布局：
```javascript
display: flex;
```
（2）设置 `flex-direction` 属性来调整此盒的子元素的布局方式。默认的方向是水平方向。
（3）可互换主侧轴，也可改变主侧轴的方向。
### 各属性详解
**1、`flex-direction`属性：**设置主轴方向。
- `flex-direction: row;` 设置**主轴方向**，默认是水平方向。属性值可以是：
- `row` 水平方向（默认值）
- `reverse-row` 反转
- `column` 垂直方向
- `reverse-column` 反转列
代码演示：
```html
主轴方向 flex-direction:row-reverse
主轴方向 flex-direction:column
主轴方向 flex-direction:column-reverse
```
**2、justify-content：**设置子元素在**主轴上的对齐方式**。
- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
- `flex-start` 从主轴的起点对齐（默认值）
- `flex-end` 从主轴的终点对齐
- `center` 居中对齐
- `space-around` 在父盒子里平分
- `space-between` 两端对齐 平分
代码演示：
```html
主轴的对齐方式：justify-content:flex-start
主轴的对齐方式：justify-content:flex-end
主轴的对齐方式：justify-content:center
主轴的对齐方式：justify-content:space-round
主轴的对齐方式：justify-content:space-bettwen
```
**3、align-items：**设置子元素在**侧轴上的对齐方式**。
- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是：
- `flex-start` 从侧轴开始的方向对齐
- `flex-end` 从侧轴结束的方向对齐
- `baseline` 基线 默认同flex-start
- `center` 中间对齐
- `stretch` 拉伸
代码演示：
```html
侧轴的对齐方式:align-items ：flex-start
侧轴的对齐方式：align-items:flex-end
侧轴的对齐方式：align-items:center
侧轴的对齐方式：align-itmes:baseline
侧轴的对齐方式：align-itmes: stretch
```
**4、`flex`属性**：设置子盒子的权重
代码演示：
```html
```