flex布局
一、设置弹性盒子布局
主轴方向
二、fiex-direction:设置主轴方向
1.column:主轴就是从上到下的垂直方向。
2.column-reverse:主轴就是从下到上的垂直方向。
3.row:主轴就是从左到右的水平方向,默认值。
4.row-reverse:主轴就是从右到左的水平方向。
主轴方向对齐方式
三、justify-content:设置主轴方向上的对齐方式
1.fiex-start:默认值,项目从主轴起点开始对齐,不留间隙。
2.fiex-end:从主轴终点对齐,不留间隙。
3.center:主轴上居中对齐,不留间隙。
4.space-around:每个项目之间的距离相等。
5.space-between:两端对齐。
交叉轴对齐方式
四、align-items:设置项目在交叉轴上对齐方式
1.center:设置交叉轴居中对齐。
2.flex-start:项目顶点与交叉轴对齐。
3.flex-end:项目底部与交叉轴终点对齐。
4.baseline:项目的第一行文字基线对齐。
五、设置flex布局;设置主轴上居中对齐,不留间隙;设置交叉轴居中对齐:
display: flex;
justify-content: center;
align-items: center;
换行方式
六、flex-wrap:设置项目是否换行
1.nowarp:不换行
2.warp:换行
3.warp-reverse:反方向换行
七、设置弹性布局;设置交叉轴居中对齐;设置主轴居中对齐;不留间隙:
display: flex;
align-items: center;
justify-content: center;
结构伪类选择器
八、结构伪类选择器 nth-child()
.box:nth-child(5){
background-color: aqua;
}