css学习之flex布局

总结
1. div是块级还是行内元素，影响的是div和同级元素的摆放位置
2. 为div设置宽高，影响的内容区域的宽高，影响div的子元素的摆放位置

一、容器属性（div作为容器，设置inline-flex或者flex）
1. flex-direction为row或者row-direction，子元素的宽度设置可能失效（因为flex-wrap默认是nowrap，会挤满整行）
2. flex-wrap=wrap时，按方向摆放元素
3. flex-flow默认值是‘row nowrap’
4. justify-content定义水平方向从哪边（左右）开始摆放元素
5. align-content定义垂直方向从哪边（上下）开始摆放元素，如果项目只有一根轴线，该属性不起作用。它会覆盖align-items的配置
6. align-items在换行之后出现多行后，在元素所属行的范围内的垂直方向，控制从哪边（上下）开始摆放元素

flex-direction:row(默认),row-reverse,column,column-reverse(我的疑问：后端返回数据js反转和css排列反转，哪个更好)
flex-wrap：nowrap(默认),wrap,wrap-reverse
justify-content：flex-start(默认),flex-end,center,space-around,space-between
align-content:flex-start,flex-end,center,space-around,space-between,stretch(默认)
align-items:flex-start,flex-end,center,baseline,stretch(默认)

二、项目属性
1. order,默认是0，越小越靠前，支持负数
2. flex-grow,默认是0，不放大。大于0时表示该项目占剩余宽度（容器宽度减去所有flex-grow为0的项目的宽度）的份数
3. flex-shrink,默认是1，放不下时会缩小，缩小的比例按剩余宽度（容器宽度减去所有flex-shrink为0的项目的宽度）除以flex-shrink为1的项目的数量
4. flex-basis,定义了再分配多余空间之前，项目占主轴的空间。默认值为auto，即项目本身的大小
5. flex为flex-grow，flex-shrink，flex-basis的组合，默认值为(0,1,auto),另外还有可选值auto(1,1,auto)，none(0,0,auto).建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
6. align-self:允许单个项目有与其他项目不一样的对齐方式，默认值时auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。可选值还有flex-start,flex-end,center,baseline,stretch。