flex布局

display:flex
容器的属性
flex-direction: row （默认值）主轴为水平方向，起点在左端。| row-reverse 起点在右端| column 主轴为垂直方向，起点在上沿。 | column-reverse;   主轴为垂直方向，起点在下沿//主轴开始方向
flex-wrap：nowrap （默认）：不换行。| wrap-reverse 换行，第一行在上方。| wrap-reverse 换行，第一行在下方。//lex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow //flex-direction和flex-wrap简写形式
justify-content：flex-start 左对齐| flex-end 右对齐| center 中间对齐| space-between 两端对齐，项目之间的间隔都相等。| space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。;//主轴对齐方向
align-items:  flex-start 起点对齐| flex-end 终点对齐| center 中间对齐| baseline 目的第一行文字的基线对齐。| stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。//交叉轴对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;//多根轴线对齐方式 。如果项目只有一根轴线，该属性不起作用。




项目的属性
order:<integer>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:<number>属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink: <number>项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis: <length> | auto;属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self: auto | flex-start | flex-end | center | baseline | stretch; 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。