<style>
.box {
/* 添加弹性布局 */
display: flex;
/* 改变主轴方向为垂直方向 */
/* flex-direction: column;将主轴方向变成了垂直方向，还是用jc控制主轴方向的对齐方式。
将侧轴方向变成了水平方向， 还是用ai控制侧轴的对齐方式。
注意：主轴和侧轴仅仅只是调换了方向而已*/
flex-direction: column;
/* 水平方向（侧轴）：需要水平居中 */
align-items: center;
/* 垂直方向（主轴）：需要均分空白空间：jcsen */
justify-content: space-evenly;
width: 150px;
height: 150px;
border: 5px solid rgb(48, 33, 33);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/media.png" alt="" />
新闻资讯
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 弹性容器 */
display: flex;
/*
弹性盒子换行显示 fwp
弹性容器高度被换行的弹性盒子均等分
*/
flex-wrap: wrap;
/* align-content 取值和jc取值是一样的
针对于多行弹性盒子的侧轴设置的
出现的前提条件，必须要先换行 flex-wrap: wrap;
align-items 针对于单行弹性盒子的侧轴对齐方式 */
/* align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between; */
/* align-content: space-evenly;无提示需手打。 */
align-content: space-evenly;
width: 1000px;
height: 600px;
background: orange;
}
.box span {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
