flex布局

一、 flex-direction主轴和交叉轴

flex-direction:
row：水平方向，从起始到终止
row-reverse：水平方向，从终止到起始
column：垂直方向，从起始到终止
column-reverse：垂直方向，从终止到起始

二、 flex-wrap 实现多行 Flex 容器

flex-wrap：
wrap：超出容器宽度换行展示
nowrap：超出宽度缩小以适应容器

三、flex-flow简写属性

flex-direction 和 flex-wrap 组合为简写属性 flex-flow，
flex-flow: row wrap;第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

四、flex 元素上的属性

flex-grow：被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸
flex-shrink：设置为正整数来缩小它所占空间到flex-basis以下
flex-basis：元素的空间大小，设定宽度为100px，则flex-basis=100px,如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸
简写
flex: 1 1 auto;第一个数值是 flex-grow。第二个数值是flex-shrink 最后一个数值是 flex-basis

五、对齐方式

align-items：使元素在交叉轴方向对齐。
stretch：默认值， 元素会默认被拉伸到最高元素的高度

flex-start： 容器的顶部对齐

flex-end：容器的下部对齐

center：居中对齐

justify-content：使元素在主轴方向上对齐
flex-start：默认值，从容器的起始线排列

flex-end：从终止线开始排列

center：在中间排列

space-around：使每个元素的左右空间相等

space-between：元素排列好之后的剩余空间拿出来，平均分配到元素之间