设置display: box

1
2
3

不设置 display: box;

1
2
3

设置display: flex;

1
2
3

用百分比

细心的会发现我们右边还有大概0.01%的宽度没有填充（由于是100不能完全等分三分），这就是使用百分比不好的一种表现

1
2
3

用百分比结合flex(溢出情况)

事实上这里可以不对父元素写display:flex

1
2
3

设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:row-reverse

1
2
3

设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:column

1
2
3

设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:column-reverse

1
2
3

设置display: flex;固定值溢出的情况;它默认是flex-wrap:nowrap，现在设置成wrap

1
2
3

设置display: flex;固定值溢出的情况;它默认是flex-wrap:nowrap，现在设置成wrap-reverse

1
2
3

设置display: flex;固定值溢出的情况;它默认是flex-flow:row nowrap，其实就是flex-direction和flex-wrap合并在一起写，现在设置成colum wrap-reverse

1
2
3

设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:flex-end

1
2
3

设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:center

1
2
3

设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:space-between

1
2
3

设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:space-around

1
2
3

设置display: flex;宽度溢出的情况;高度不溢出并上下有空余部分;它默认是align-content:flex-start,现在设置成align-content:flex-start;注意：这属性在只有一行的伸缩容器上没有效果

1
2
3

设置display: flex;宽度不溢出的情况;高度不溢出并上下有空余部分;它默认是align-items:flex-start,现在设置成align-items:flex-end;注意：这属性在一行的伸缩容器上是有效果的

1
2
3

设置display: flex;宽度不溢出的情况;高度不溢出并上下有空余部分;它默认是align-items:flex-start,现在设置成align-items:center;注意：这属性在一行的伸缩容器上是有效果的

1
2
3

定义flex子项单独在侧轴（纵轴）方向上的对齐方式,意思就是之前我们定义的位置都是针对父元素article来写定位样式，但align-self却可以对子元素section进行单独的定位

1
2
3