css 弹性布局换行 |css边框移动特效代码

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

在CSS弹性布局中，大家可以使用flex-wrap属性来实现换行。默认情况下，它的值是nowrap，表示不换行。而当大家将它设置为wrap时，它就可以实现在空间不足的情况下自动换行。

接下来大家来看一下在实际开发中的应用场景。比如大家有一个固定宽度的父容器，里面包含若干个子容器，子容器的宽度不确定，但是大家希望它们在一行内排列完毕后再进行换行，而不是留下一小部分剩余空间：

.parent {
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.child {
height:100px;
margin: 10px;
}

上面的代码中，大家通过将父容器的宽度设置为固定值，然后将子容器的宽度设置为不确定值来实现了子容器的自适应。并且大家将父容器的justify-content属性设置为flex-start，让它们从左边起始排列。

总结起来，CSS弹性布局中的换行需要用到flex-wrap属性，它的默认值是nowrap。大家可以通过设置为wrap来实现自动换行，并且还可以结合其他CSS属性来实现各种应用场景的布局。