flex 布局一行两个超出自动换行

作者：System 时间：2024年08月15日分类：所有,css3 字数：619

这篇文章距离上次修改已过452天，其中的内容可能已经有所变动。

在Flex布局中，要实现一行两个元素并且超出自动换行的效果，可以将元素的flex-wrap属性设置为wrap。这样当容器内的空间不足以放下第二个元素时，第二个元素会自动移到下一行。

以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <!-- 更多的元素 -->
</div>

CSS:




.flex-container {
  display: flex;
  flex-wrap: wrap;
}
 
.flex-item {
  width: 50%; /* 每个元素宽度占一半 */
}

在这个例子中，.flex-container是一个Flex容器，通过设置display: flex和flex-wrap: wrap来启用Flex布局和自动换行功能。.flex-item是容器内的子元素，每个子元素的宽度设置为50%，保证最多两个元素在一行内。当添加更多的.flex-item元素时，超出容器宽度的部分会自动移到下一行。

flex 布局一行两个超出自动换行

评论已关闭

推荐阅读