this is header!(垂直居中)

about flex container | flex容器

flex-direction: 纵向倒序(cloumn/column-reverse) 横向倒序(row/row-resever)

注意：【换行】flexitem 是对剩余空间进行分割，因此没有足够的剩余空间则flexitem会在flex-flow轴方向上的尺寸为零;

one
two
three
four
flex-wrap: nowrap wrap wrap-reverse
flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

注意：【以主轴对齐】针对有间隙的flex item，这里将flex item用百分比设定长度，而并非用flex-grow自动分割

one
two
three
justify-content: flex-start flex-end center space-between space-around

注意：【以交叉轴对齐】

one
two
three
align-items: flex-start flex-end center baseline

注意：【以交叉轴对齐存在多行时即多条轴线时】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: flex-start flex-end center space-between space-around stretch

about flex item | flex项目

注意：【根据每一个flex item的order值进行排序】

order：
one{order:1;}
two{order:3;}
three{order:2;}

注意：【项目的放大比例，默认为0，即如果存在剩余空间，也不放大】可以实现左边固定宽右边自适应

flex-grow：
one {flex-prow:0;}
two
three

注意：【属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。】

flex-shrink:
one {flex-shrink:0;}
two
three

注意：【属性定义了在分配多余空间之前，项目占据的主轴空间（main size）】

flex-basis:
one {flex-basis:200px;}
two
three

注意：【属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。】

flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

注意：【属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。】

align-self: flex-start | flex-end | center | baseline | stretch;
one{align-self: flex-end;}
two
three
btn1
btn2
btn3
btn4