[分享]css允许子节点自动换行的样式

CSS中有一种非常实用的样式，可以让子节点自动换行。这种样式是使用flex-wrap: wrap;来实现的。

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

使用这个样式，可以让子节点在父容器中按照一定的规则自动换行，而不需要手动在代码中添加换行符号。比如，如果有一个包含若干图片的容器，有时候这些图片的宽度总和会超过容器的宽度，导致图片无法完整显示。这时候就可以使用flex-wrap: wrap;来自动将多余的图片折行显示。

在实际开发中，flex-wrap: wrap;还可以用来实现其他一些常见的布局需求。比如，可以使用它来实现等高的列布局。下面是一个例子：

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

.col {
  flex: 1;
  margin: 10px;
} 

使用这个样式，可以让一行中的多个等宽列自动换行排列，并保持等高。不需要使用其他复杂的技巧，就可以轻松实现这种布局效果。

总的来说，flex-wrap: wrap;是CSS中一个非常实用的样式。它可以让开发者更轻松地实现一些特定的布局需求，同时也可以让代码更加简洁易懂。