.box{
border:1px solid red;
width: 730px;
/* 设置成flex布局之后，子元素float就失效了 定位仍然可用 */
display: flex;
margin:20px auto;
/* 设置主轴方向 */
/* 默认 不换行 主轴方向从左到右 */
/* 从右到左的顺序呢？ */
/* flex-direction: row; */
/* 颠倒顺序 */
/* flex-direction: row-reverse; */
/* 主轴方向从上到下 */
/* 变换了主轴 */
/* flex-direction: column; */
/* 颠倒 */
/* flex-direction: column-reverse; */
/* flex布局默认不换行 */
/* 默认情况下，项目都排在一条线（又称"轴线"）上 */
/* flex-wrap: nowrap; */
/* 换行 */
/* flex-wrap: wrap; */
/* 上下行颠倒 */
/* flex-wrap: wrap-reverse; */
/* 复合属性 设置主轴方向和是否换行的 */
/* flex-flow:row wrap; */
/* flex-direction: column;*/
height: 600px;
/* 定义了项目在主轴上的对齐方式（应为你的主轴是水平方向的 ） */
/* justify-content: flex-start; */ /* 左对齐 */
/* justify-content: flex-end; */ /* 右对齐 */
/* 所以 justify-content: center 表示水平方向居中*/
justify-content: center;
/* flex布局不像绝对定位，脱离文档流，flex布局设置了还是会遵守文档流布局 */
/* 子元素靠边对齐 两端对齐，项目之间的间隔都相等*/
/* justify-content: space-between; */
/* 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍*/
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
/* justify-content: space-around; */
/* 子元素相邻的距离保持一致 */
/* justify-content: space-evenly; */
/* 定义项目在交叉轴上对齐方式 */
/* 垂直方向居中 */
/* align-items: center; */
/* 垂直方向的顶部 交叉轴的起点对齐 */
/* align-items:flex-start; */
/* 垂直方向的底部 交叉轴的终点对齐*/
/* align-items: flex-end; */
/* baseline: 项目的第一行文字的基线对齐 */
/* 垂直方向按照子元素的文字所在的底部位置进行对齐 */
/* align-items: baseline; */
/* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
*/
/* align-items: stretch; */
flex-wrap: wrap;
}
.box .item{
width: 200px;
height: 200px;
height: auto;
background-color: cadetblue;
margin:5px;
}
