flex布局

flex布局相关知识点

注意：当盒子设置了display：flex；之后，子元素的content | float | clear 属性将失效。

两个重要概念

主轴（main-axis） 和交叉轴（cross-axis）

父容器设置属性（6个）

flex-direction
设置主轴的方向
row | row-reverse | column | column-reverse
flex-wrap
当主轴方向的空间不够时，对溢出内容的控制
nowrap | wrap | wrap-reverse
flex-flow
这个是flex-direction 和flex-wrap的缩写
justify-content
这个是设置主轴方向的内容的对齐方式
center | flex-start | flex-end | space-between | space-around | space-evenly
align-items
这个是设置交叉轴的对齐方式
flex-start | flex-end | stretch | center | baseline
align-content
这个是当有多个轴线时，设置轴线的对齐方式
flex-start | flex-end | stretch | center | baseline

子项设置属性

order
设置子项的排列顺序，值是整数，可以为负，默认值为0。
flex-grow
设置当主轴方向有剩余空间时，子项的放大比列，默认值为0，即不放大。
flex-shrink
设置当主轴方向的空间不够时，子项的缩小比列，默认值是1，即所有子项等比列缩小。设置为0，就是不缩小。
flex-basis
分配主轴空间时，先分配给当前子项设定值的空间，再分配剩余空间到其余子项。设置的值可以是height或width的值。
flex
是flex-grow和flex-shrink以及flex-basis的缩写。
align-self
设置子项在交叉轴的对齐方式，可以覆盖父级的align-items的设置，默认值是auto，即继承父级的设置。