调整主轴:flex-direction: column;
就是把横着的X轴变成竖着
不写了,直接上代码
<style>
.box {
width: 500px;
height: 500px;
background-color: pink;
/* 弹性容器 */
display: flex;
/* 主轴默认是X轴 */
/* flex-direction: row; */
/* 主轴反方向排列 */
/* flex-direction: row-reverse; */
/* 调整主轴,换成Y轴 */
flex-direction: column;
/* 调整主轴,换成Y轴反方向排列 */
/* flex-direction: column-reverse; */
/* 侧轴居中 */
align-items: center;
/* 主轴居中 */
justify-content: center;
}
.box>div {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="son">老大</div>