css——display: flex之垂直方向布局的具体实践

弹性布局display: flex;垂直方向布局的具体实践。

在父级设置:

display: flex;将对象作为弹性伸缩盒显示

flex-flow: column;方向设置为垂直方向(flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,直接使用flex-direction亦可)

父级需设置高度

在子级设置占比:

flex: 1;按占比分配非设置固定值的空间

头部标题

1

2

3

4

5

6

7

8

9