对于css3容器属性和项目属性的学习

今天学习了css的容器与项目属性
以下是今天学习到的内容

css的容器属性包含flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content等等。
flex-direction 属性
作用：设置项目排列方向
flex-wrap 属性
作用：设置是否允许项目多行排列，以及多行排列时换行的方向
flex-flow 属性
相当于direction和wrap的集合
flex-flow: row nowrap;/* 顺序排列且不换行 /
flex-flow:row-reverse wrap;/ 反序排列且自动换行 */
justify-content 属性
作用：设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
align-items属性
作用：元素在交叉轴的对齐方式
align-content 属性
作用：多行元素在交叉轴的对齐方式

css的项目属性包含order、flex-grow、flex-shrink、flex-basis、flex、align-self等等
order属性
作用：
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。
flex-shrink属性
作用：
时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数
未设置flex-shrink时，默认flex-shrink值为1
扩张因子flex-grow: 0（默认值）

场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。

取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。扩张因子flex-grow: 0（默认值）
flex-basis属性
当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
flex 属性
本质：
flex-grow，flex-shrink，flex-basis的简写方式。
值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。
align-self属性
设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，可以对项目的对齐方式做特殊处理。
默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。
align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch