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

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

在父级设置：

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

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

父级需设置高度

在子级设置占比：

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

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

.wrap {

height: 100%;

flex-flow: column;

display:flex;

}

.header {

height: 30px;

line-height: 30px;

background: pink;

}

.wrapper {

flex: 1;

display:flex;

border: 1px solid blue;

}

.left, .middle, .right {

flex: 1;

display:flex;

flex-flow: column;

padding: 5px 0;

}

.cl {

border: 1px solid pink;

flex: 1;

margin: 5px;

}

头部标题

1

2

3

4

5

6

7

8

9