一、主轴方向
/* 添加弹性布局 df */
display: flex;
/*
改变主轴方向为垂直 fd
flex-direction: column;
这个值作用：主轴方向变为垂直，侧轴方向变为水平
注意点：现在主轴和侧轴仅仅只是方向调换了而已，主轴依然还是用jc改变对齐方式，侧轴还是用ai改变对齐方式
*/
flex-direction: column;
/* 水平方向(侧轴)居中 aic */
align-items: center;
/* 垂直方向(主轴)均等分 jcsev */
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>
</html>
二、弹性盒子换行
margin: 0;
padding: 0;
}
.box {
/* 添加df */
display: flex;
/* 让弹性盒子换行显示 fwp */
flex-wrap: wrap;
/*
控制多行的侧轴对齐方式
align-content属性出现是有前提条件的：必须要先设置flex-wrap: wrap;
align-content取值和jc一样的
控制单行的侧轴排列方式
align-items flex-start flex-end center sh
*/
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
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>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</body>
</html>
