display:flex的五大属性

display:flex的五大属性

1, flex-direction 容器内元素的排列方向(默认横向排列)

row 按照横着方向排序

row-reverse 按照横着方向反向排序

column 按照竖着方向排序

column-reverse 按照竖着方向反向排序

2, flex-wrap 容器内元素的换行(默认不换行)

nowrap (默认)元素不换行 如果自容器总宽度超过100% ，那么默认会将模块进行平分

wrap 元素宽度超过100% 那么会将超过的模块换到下一行

3，justify-content 元素在主轴（页面）上的排列

flex-start 元素在主轴上由左向右排列

center 元素在主轴（页面）上居中排列

flex-end 元素在主轴（页面）上由右或者下开始排列 ：类似于右浮动

space-between 元素在主轴（页面）上左右两端或者上下两端开始排列，类似对页面显示进行等分

space-around 每个元素两侧的间隔相等。元素与边框的距离和元素之间的距离不相等

4，align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

flex-start 顶部侧边栏靠上对齐

flex-end 底部侧边栏靠下对齐

center 弹性盒子元素在该行的侧轴（纵轴-左边轴）上居中放置

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

5, align-content 弹性容器内的元素没有占用交叉轴上所有可用的空间时 对齐容器内的各项（垂直）

flex-start 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠 可结合flex-wrap:wrap 对元素宽度进行调整展示

flex-end 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠，顺序从上至下 备注：需设定元素的高度，否则不显示

center 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠

stretch 元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’

space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布, 对纵轴进行平分

space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’