给父元素添加
1.display:flex/inline-flex;
flex将对象作为弹性伸缩盒显示
inline-flex将对象作为内联块弹性伸缩盒显示
2.flex-direction (主轴排列方向)
row 默认,横向一行排列
row-reverse 反转横向排列
column 纵向排列
column-reverse 反转纵向排列
3.justify-content(主轴对齐方式)
flex-start默认,顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐,中间自动分配
space-around自动分配距离
*默认元素在主轴上容不下不会换行,会被压缩
4.align-items(侧轴对齐方式)
flex-start 侧轴起始边界
flex-end 侧轴结束边界
center 居中放置
baseline 基线对齐
stretch 默认值,项目被拉伸以适应容器
5.flex-wrap设置换行
nowrap 容器为单行,该情况下子项可能会溢出容器
wrap 容器为多行,子项内部会发生断行
wrap-reverse 反转排列
6.align-content(行与行之间对齐方式)
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐,中间自动分配
space-around 自动分配距离
stretch 默认值,项目被拉伸以适应容器
给子元素添加
1.align-self 灵活容器内被选中项目的对齐方式
--可重写灵活容器的align-items属性
auto 默认值,元素继承了它的父容器的align-items属性
stretch 元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
2.order 排序优先级
数字越大越往后排,默认为0,支持负数
3.flex-grow 项目的放大比例
flex:1;--放大比例
4.flex-shrink 项目的缩小比例
flex-shrink:0;元素不缩小
5.flex-basis 项目的长度
多列
column-count列数
column-gap列间距
column-rule列线条
break-inside: avoid;防止瀑布流将元素折断