css不定大小元素自动排列

在网页设计中，我们经常需要将一些不定大小的元素自动排列。这时候，CSS可以帮助我们实现这个需求。

.container{
  display: flex;
  flex-wrap: wrap;
}

.item{
  flex: 1 0 200px;
  margin: 10px;
}

上面的代码中，我们首先定义了一个容器，使用flex布局，并开启了自动换行。然后，我们给每个元素都设置了一个弹性值，其中第一个参数1表示弹性盒子在剩余空间占比，第二个参数0表示弹性盒子在空间不足时不缩小，第三个参数200px表示弹性盒子的基本大小为200px。

使用这些CSS样式后，我们就可以在容器中放置各种不定大小的元素，它们会自动按照一定的规则排列。

比如，如果我们在这个容器里放置了三个元素，它们可能会排列成如下的方式：

 ________  ________
|        ||        |
|        ||        |
|        ||________|
|________| ________
 ________|        |
|        |        |
|        |        |
|________|________|

如上图所示，每个元素会自动填满可用的空间，并自动按照上下左右的顺序排列。这样，无论我们放置什么元素，它们都会自动排列，并且不会出现大片的空白区域。

综上所述，CSS可以帮助我们实现不定大小元素的自动排列，让网页更加美观和实用。