flex布局中的盒子宽度各50%
时间: 2024-08-10 13:00:57 浏览: 65
在 Flex 布局中,如果你想让两个或更多的盒子占据容器宽度的相等部分,比如每个盒子各占50%,你可以使用 `flex: 1` 或者 `flex-basis: 50%`。这两种方式的区别在于:
1. `flex: 1`:这是弹性布局的主要原则,当你给一个盒子赋予 `flex: 1` 的值时,它会占据可用空间的一部分,并且所有设置了这一属性的盒子会在水平方向上等分剩余的空间。这意味着它们会随着容器的缩放或内容的变化自动调整大小。
2. `flex-basis: 50%`:这个属性设定的是盒子在未分配其他空间前的基础大小,即它的初始尺寸。每个盒子独立计算自己的基础大小,所以设置为 `flex-basis: 50%` 的盒子会直接占用容器总宽度的一半,不管容器有多少这样的盒子。
以下是一个简单的例子:
```html
<style>
.container {
display: flex;
justify-content: space-between; /* 分布盒子,留有空隙 */
}
.box {
flex: 1; /* 或者 flex-basis: 50%; */
background-color: #f00; /* 红色背景以便于区分 */
padding: 10px;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<!-- 或更多 -->
</div>
```
在这个例子中,`.box` 全部都应用了 `flex: 1` 或 `flex-basis: 50%`,因此它们会在容器内平均分布,每两个之间有一段空白。