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确保盒子的实际宽度包含了内边距和边框。
评论已关闭