.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;
}
/* 写一个盒子 里面元素 顺序 1 2 3 请调整成为 213 让2 在交叉轴方向靠近起始点 */
</style>
</head>
<body>
<div class="box">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<!-- <div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div> -->
</div>
</body>
</html>
width: 600px;
margin:30px auto;
border:1px solid red;
display: flex;
}
.box .item{
/* flex布局item的基本宽度 */
/* 设置了flex-basis width就不管用了 同时存在的时候，优先使用flex-basis */
/* 如果父元素的宽度太小了，item排列不下 设置的flex-basis的宽度会自动缩小，
直到占满父元素 */
/* flex-basis:200px ; */
/* width: 150px; */
height: 150px;
background-color: chocolate;
margin: 5px;
/* 放大item 均匀占满父元素 */
/* flex-grow: 1; */
/* flex: flex-grow flex-shrink flex-basis*/
flex:1;/* 代表flex: 1 1 auto; */
}
/* .item:nth-child(3){ */
/* flex-grow 0代表不放大 1 就代表放大 */
/* flex-grow: 1; */
/* } */
/*
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。主要作用是：分配剩余空间的
*/
