Document
.box {
width: 600px;
height: 600px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
margin:20px auto;
/* 多列交叉轴方向的布局 */
/* 把多列的item在整体的垂直方向上设置位置 使用align-content */
/* align-content: center; */
/* 如果是当个item控制他的垂直方向我们使用align-items */
/* align-items: center; */
/* flex-start 在交叉轴的起始 flex-end 在交叉轴的末尾 */
/* center 在交叉轴的中间 space-between 在交叉轴的两端
space-around 空白环绕 两个项目之间的距离大一倍
stretch 是默认值 要想设置 首先不能设置item的高度 */
/* align-content: space-between; */
}
.box .item {
width: 150px;
height: 150px;
margin:10px;
background-color: cadetblue;
}
/* .box .item:nth-child(1) {
} */
/* order 定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
.box .item:nth-child(2) {
/* order:-1; */
/* 单个的item 控制他的在交叉轴上面的方向 */
align-self: stretch;
height: auto;
}
/* 交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
/ .box { / 保证所有成员 在一列的情况下的 控制交叉轴的方向 */ align-items: center; }
</style>
