display: flex; flex-wrap: wrap;

display: flex; 是CSS3中新增的一种布局方式，它可以使一个元素成为弹性容器，使其内部的元素可以沿着主轴或交叉轴方向排列，并且可以方便地控制子元素的位置、大小等。

flex-wrap: wrap; 则是用于控制子元素在弹性容器中的换行方式。当子元素的总宽度超出了弹性容器的宽度时，如果设置了flex-wrap: wrap;，则会自动将超出的子元素进行换行排列，使其不会超出弹性容器的范围。

举个例子，如果设置了以下样式：

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

.container下有6个子元素，而它们的总宽度超过了容器的宽度，那么这些子元素会按照弹性容器主轴方向排列，直到排满一行，然后会自动换行，继续沿着主轴方向排列下一行的子元素。如果不设置flex-wrap: wrap;，则子元素会被挤出弹性容器的范围。