1
2
3
4
5
6

.container{
    display:flex;
    flex-direction:row
}
* 主轴在水平方向，从左到右排列。

1
2
3
4
5
6

.container{
    display:flex;
    flex-direction:row-reverse
}
* 主轴在水平方向，从右到左排列。

1
2
3
4
5
6

.container{
    display:flex;
    flex-direction:column
}
* 主轴在垂直方向，从上到下排列。

1
2
3
4
5
6

.container{
    display:flex;
    flex-direction:column-reverse
}
* 主轴在垂直方向，从下到上排列。

1
2
3
4

.container{
    display:flex;
    flex-wrap:nowrap
}

1
2
3
4

.container{
    display:flex;
    flex-wrap:wrap
}

1
2
3
4

.container{
    display:flex;
    flex-wrap:wrap-reverse
}

1
2
3
4
5
6

.container{
    display:flex;
    justify-content:flex-start
}
*左边对齐

1
2
3
4
5
6

.container{
    display:flex;
    justify-content:flex-end
}
*右边对齐

1
2
3
4
5
6

.container{
    display:flex;
    justify-content:center
}
*居中

1
2
3
4
5
6

.container{
    display:flex;
    justify-content:space-between
}
*两边对齐，项目之间的间隔相等

1
2
3
4
5
6

.container{
    display:flex;
    justify-content:space-around
}
*项目两边间距一样，项目之间的间距是项目一侧间距之和

1
2
3
4
5
6

.container{
    display:flex;
    align-items:flex-start;
}
*项目在交叉轴（cross axis）上，向起点（cross start）对齐。

1
2
3
4
5
6

.container{
    display:flex;
    align-items:flex-end;
}
*项目在交叉轴（cross axis）上，向终点（cross end）对齐。

1
2
3
4
5
6

.container{
    display:flex;
    align-items:center;
}
*项目在交叉轴（cross axis）上，居中对齐。

1
2
3
4
5
6

.container{
    display:flex;
    align-items:baseline;
}
*项目在交叉轴（cross axis）上，基于第一行文字的基线对齐。

1
2
3
4
5
6

.container{
    display:flex;
    align-items:stretch;
}
*项目在交叉轴（cross axis）上，撑满整个容器。（前提未设置高度或auto）

1
2
3
4
5

.container{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start
}

1
2
3
4
5

.container{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-end
}

1
2
3
4
5

.container{
    display:flex;
    flex-wrap:wrap;
    align-content:center
}

1
2
3
4
5

.container{
    display:flex;
    flex-wrap:wrap;
    align-content:space-between
}

1
2
3
4
5

.container{
    display:flex;
    flex-wrap:wrap;
    align-content:space-around
}

1
2
3
4
5
6
7

.container{
    display:flex;
    flex-wrap:wrap;
    align-content:stretch
}
*占满整个交叉轴，下面的空隙是设置了margin，非剩余空隙

1
2
3
4
5
6
7
8
9
10
11
12

.container{
    display:flex
}
.item1{
    order:1
}
.item2{
    order:3
}
.item3{
    order:2
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.container{
    display:flex
}
.item1{
    flex-grow:1
}
.item2{
    flex-grow:2
}
.item3{
    flex-grow:1
}
*存在在剩余空间的条件下，item2的占有剩余空间的大小是item3和item1的两倍。
注：下面的空间是设置了padding 和 margin 值，非剩余空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.container{
    display:flex
}
.item1{
    flex-shrink:1
}
.item2{
    flex-shrink:0
}
.item3{
    flex-shrink:1
}
*空间不足的条件下，item3和item1将等比缩小，item2不缩小。
注：下面的空间是设置了padding 和 margin 值，非剩余空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.container{
    display:flex
}
.item1{
    flex-basis:50px
}
.item2{
    flex-basis:150px
}
.item3{
    flex-basis:300px
}
*item1的在主轴上的初始的大小是50px,item2是150px,item3是300px。

1
2
3
4
5
6

.container{
    display:flex
}
.item{
    flex:auto
}

1
2
3
4
5
6
7
8

.container{
    display:flex
}
.item3{
    align-self:auto
}
*设置auto 继承父元素的align-items属性，如果父元素没有设置，则相当于项目设置成了stretch。

1
2
3
4
5
6
7
8

.container{
    display:flex
}
.item3{
    align-self:flex-start
}
*项目在交叉轴(cross axis)上起点对齐。

1
2
3
4
5
6
7
8

.container{
    display:flex
}
.item3{
    align-self:flex-end
}
*项目在交叉轴(cross axis)上终点对齐。

1
2
3
4
5
6
7
8

.container{
    display:flex
}
.item3{
    align-self:center
}
*项目在交叉轴(cross axis)上居中。

1
2
3
4
5
6
7
8

.container{
    display:flex
}
.item3{
    align-self:baseline
}
*项目的第一行文字的基线对齐。

1
2
3
4
5
6
7
8

.container{
    display:flex
}
.item3{
    align-self:stretch
}
*项目在交叉轴(cross axis)充满。