flex弹性布局，子div换行显示
在Flex布局中，如果想要子div在容器中换行显示，可以将子div的flex-wrap属性设置为wrap。这样，当空间不足以容纳所有子div时，它们会自动移动到新的行或列。
以下是一个简单的例子：
HTML:
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<!-- 更多的flex-item -->
</div>CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 100px; /* 或者其他宽度 */
height: 100px; /* 或者其他高度 */
margin: 5px; /* 为了美观，可以添加一些外边距 */
}在这个例子中，.flex-container是一个Flex容器，它的flex-wrap属性被设置为wrap，这意味着当Flex项目（.flex-item）无法在一行内放下时，它们会自动移动到新的一行中显示。每个.flex-item被设置了固定宽度和高度，以及一些外边距用于美观。当窗口或容器大小减小时，子div将会根据需要换行显示。
评论已关闭