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各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸
网友评论