CSS：让人又爱又恨的flex

flex是弹性盒模型，使用flex时，在父元素上设置display:flex;之后根据需求分别在父元素和子元素上设置属性。
在父元素上的属性是针对于一行或者多行元素而言的，在子元素上的属性，是针对于一行中的某个子元素而言的。

作用在flex父容器上	作用在flex子项上
flex-direction ：row coloum	order -1 0 1 2（默认0，值越大越靠后）
flex-wrap : nowrap wrap	flex-grow （默认0，1：剩余所有空间全部填满，0.2剩余空间1/5）
flex-flow （flex-direction flex-wrap	flex-shrink （默认1 收缩，0：不收缩，>1收缩得更加严重
justify-content (在主轴上子项的对齐方式)	flex-basis （和width作用同，不过比它优先级高默认auto
align-items (在侧轴上子项的对齐方式)	flex ：0 1 auto;flex: 0也可，代表后两个省略了（优先级比单独写flex-子项高
align-content（在侧轴上子行的对齐方式	align-self ：center /flex-end/flex-start/stretch

1 flex-direction:row

reverse之后整体排列的方向发生变化

CSS：让人又爱又恨的flex

虽然每个都设置的width，但是如果是nowarp形式，大家都会挤一挤，每个width都缩小，如果设置了wrap,当空间不够时，还是不会牺牲width
CSS：让人又爱又恨的flex

取值	含义
flex-start	默认值，表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

CSS：让人又爱又恨的flex

下图左侧为设置了每个盒子的height和不设置height的情况。

CSS：让人又爱又恨的flex

多行时，行与行之间空间分配

取值	含义
stretch	默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start	表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。
space-around	每一行元素上下都享有独立不重叠的空白空间。
space-evenly	每一行元素都完全上下等分。

stretch的含义是如果只有一行，那么那一张占据100%空间，如果两行，每行就占据50%空间
CSS：让人又爱又恨的flex

主要是区分justify-content align-items align-content

justify-content	align-items	align-content
主轴方向上各个子项排布	侧轴方向上每一行子项排布	侧轴方向上多行排布