抱歉，您的浏览器无法访问本站

多列布局

类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。

格式举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.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这标题位于整个文flex-wrap本的标题，而不是处在某一列之中*/
    -webkit-column-span: all;
    text-align: center;
}

备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。

flex：伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。

如上图所示，有几个概念需要了解一下：

• 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。

• 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。

PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

设置伸缩布局的步骤

（1）指定一个盒子为伸缩布局：

1

display: flex;

（2）设置 flex-direction 属性来调整此盒的子元素的布局方式。默认的方向是水平方向。

（3）可互换主侧轴，也可改变主侧轴的方向。

各属性详解

1、flex-direction属性：设置主轴方向。

• flex-direction: row; 设置主轴方向，默认是水平方向。属性值可以是：
  • row 水平方向（默认值）
  • reverse-row 反转
  • column 垂直方向
  • reverse-column 反转列

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36