Flex属性总结

flex属性决定内容体的排列方式

1.父元素属性

1).display:flex

定义一个flex属性的容器

2).flex-direction

决定着主轴的方向

row 为默认值，默认为水平方向

column 竖直方向

row-reverse 水平从右到左

column-reverse 垂直从下到上

3).flex-wrap

是否换行

nowrap 为默认值不换行 wrap 换行 wrap-reverse 换行且颠倒顺序

4).flex-flow

属性是 flex-direction 属性和 flex-wrap 属性的简写形式

默认值为row nowrap

5).justify-content

设置元素在主轴上的排列方式

flex-start 默认值 从主轴开始位置排列

flex-end 向主轴的结束位置对其

center 主轴中间

space-between 内部元素平均排布

space-around 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半

6).align-items

主轴的交叉轴

flex-start 默认值 从主轴开始位置排列

flex-end 向主轴的结束位置对其

center 交叉轴中间

baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐

stretch 拉伸元素，前提是内部元素不能狮子width或者height

7).align-content

设置或检索弹性盒堆叠伸缩行的对齐方式

flex-start

各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行
flex-end

各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行
​ center

各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一 行之间的距离相等
​ space-between

各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则 按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等
​ space-around

各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后 一行后面的空间是其他空间的一半
​ stretch

各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸