结构:display:flex;
把父元素当弹性容器,通过父元素,操作子元素,弹性布局
主轴对齐方式:
/*起点开始依次排序 从左到右 默认值*/
justify-content: flex-start;
/*终点开始依次排序 从右到左 */
justify-content: flex-end;
/* 主轴居中 重点*/
justify-content: center;
/* 盒子平均分,比例1:2 */
justify-content: space-around;
/* 盒子平均分,2边要靠边,中间平均分距离 重点*/
justify-content: space-between;
/* 盒子平均分,比例为1:1 */
justify-content: space-evenly;
侧轴对齐方式:
/* 侧轴对齐方式 子元素默认和父元素高度一样 拉伸*/
align-items: stretch;
/* 从上边开始排列 默认起点开始排列在上面 */
align-items: flex-start;
/* 从下边开始排列 终点开始排列 */
align-items: flex-end;
/* 侧轴居中 ,垂直居中 重点*/
align-items: center;
侧轴单独对齐: /* align-self 单独控制子元素 ,取值和align-items一致*/
写一个案例:使用弹性布局让盒子居中
示意图:
代码:
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
/* 弹性容器 */
display: flex;
/* 主轴对齐 */
justify-content: center;
/* 侧轴对齐 */
align-items: center;
}
/* 子盒子是弹性盒子 */
.box .son {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>