border: 1px solid red;
width: 1400px;
height: 1400px;
/* 设置为flex后，子元素浮动失效，定位还可以用 */
display: flex;
margin: 5px auto;
/* 设置为垂直排列 */
/* flex-direction: column; */
/* 设置为可以换行 */
/* flex-wrap: wrap; */
/* 设置为倒序排列 加reverse */
/* flex-direction: column-reverse; */
/* 垂直方向底部开始 */
/* align-items: flex-end; */
/* 垂直方向居中 */
/* align-items: center; */
/* 水平方向居中 */
/* justify-content: center; */
/* 以文字为基准对齐 */
/* align-items: baseline; */
}
.item{
width: 200px;
height: 200px;
background-color: blueviolet;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
