1.flex
display: flex;
2.容器属性
1)flex-direction:规定item的排列方向
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2).flex-wrap:是否换行
- nowrap(默认):不换行(会被压缩)。
- wrap:换行,第一行在上方(垂直方向会等分)。
- wrap-reverse:换行,第一行在下方。
3)flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
4)justify-content:规定item在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐
- space-around:每个item两侧的间隔相等。
5).align-items:规定item在交叉轴上的对齐方式
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中间点对齐。
- baseline: item的第一行文字的基线对齐。
- stretch(默认值):如果item未设置高度或设为auto,将占满整个容器的高度。
6)align-content:规定多条轴线时的对齐方式,单条轴线无作用
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中间点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。
stretch(默认值):轴线占满整个交叉轴。
3.order 定义item的排列顺序,数值越小,排列越靠前,默认为0
4.flex-grow:定义item的放大比例,默认为0
5.flex-shrink:定义了item的缩小比列,默认为1,负数无效
6.flex-basis:规定item占据空间的大小,默认为auto
7.flex:该属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为“0 1 auto”
8.align-self:允许单个item有与其他item不一样的对齐方式,可覆盖align-items属性,默认值为auto
欢迎补充,一起进步。