flex布局一行显示两个同宽、高的盒子并可以换行

要在Flex布局中实现一行显示两个同宽、高的盒子，并且能够换行，可以使用以下CSS样式：




.container {
  display: flex;
  flex-wrap: wrap;
}
 
.box {
  flex: 0 0 50%; /* 每个盒子占据父容器宽度的50% */
  box-sizing: border-box; /* 盒子宽度包含了padding和border */
}

HTML结构如下：




<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <!-- 更多盒子 -->
</div>

这里.container是包含所有盒子的父容器，使用display: flex开启Flex布局，并通过flex-wrap: wrap属性实现自动换行。.box是每个盒子的类，使用flex: 0 0 50%使得每个盒子宽度为父容器的一半，并且通过box-sizing: border-box确保盒子的实际宽度包含了内边距和边框。

flex布局一行显示两个同宽、高的盒子并可以换行

评论已关闭

推荐阅读