flex布局模型
1.flex布局
语法：
display: flex;
弹性容器
弹性盒子
主轴：默认在水平方向
侧轴/交叉轴：默认在垂直方向
display: flex;
父级：弹性容器
子级：弹性盒子
2.主轴对齐方式
语法：
justify-content: ;
(注：工作当中后4个常用)
3.侧轴对齐方式
语法：
align-items: ;当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self: ;单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
4.修改主轴方向
语法：
flex-direction: ;
示例：
代码：
html部分：
css部分：
.zz1 {
/* 设置弹性布局 */
display: flex;
/* 修改主轴方向为垂直 */
flex-direction: column;
/* 垂直居中 */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 设置盒子宽高背景色 */
width: 200px;
height: 200px;
background-color: pink;
}
评论