css盒子优雅换行排列

CSS盒子优雅换行排列是CSS布局中常用的一项技巧。这种排列方式可以让页面在不同尺寸的设备上，根据屏幕宽度自适应地调整盒子的数量和宽度，以达到更好的视觉效果。下面我们将使用CSS Flexbox布局来实现优雅换行排列。

.container {
  
 display: flex;
  
 flex-wrap: wrap;
  
 justify-content: space-between;
  
 align-items: center;
}
.box {
  
 width: calc(50% - 10px);
  
 margin-bottom: 20px;
}
@media (min-width: 768px) {
  
 .box {
  
   
 width: calc(33.33% - 10px);
  
}
}
 

首先，我们在容器中应用了Flexbox布局，并使用了flex-wrap属性来允许盒子换行。justify-content和align-items属性被用来控制在容器中的盒子的水平和垂直对齐。

然后，我们对每个盒子设置了一个固定的宽度，并使用margin-bottom属性来为其添加间距。在媒体查询中，我们将盒子的宽度设置为屏幕宽度的三分之一，从而在大屏幕上显示更多盒子。

最后，我们可以在HTML代码中添加容器和盒子的元素，并应用上述CSS样式来实现优雅换行排列。