创建一个柔性盒，其中包含3个宽度相等的项目

Question

我正在尝试创建一个flexbox，其中有3个项目的宽度相等。问题是，如果我添加填充或间隙，或者两者兼而有之。它断了(只有2列(我不想使用网格。它需要灵活

这是Html和css

.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.color {
background-color: limegreen;
}
.spacing {
padding: 1em;
}
.flex-item {
flex: calc(100% / 3);
}

<div class="flex-container">
<div class="flex-item color spacing">1</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">4</div>
<div class="flex-item color spacing">5</div>
<div class="flex-item color spacing">6</div>
<div class="flex-item color spacing">7</div>
<div class="flex-item color spacing">8</div>
</div>

Answer 1

只需将以下内容添加到.flex-item

flex: calc((100% - 2rem) / 3);
box-sizing: border-box; 

-2rem是因为在第一个和第二个元素以及第二个和第三个元素之间有gap。

因此，您的代码应该如下：

.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.color {
background-color: limegreen;
}
.spacing {
padding: 1em;
}
.flex-item {
flex: calc((100% - 2rem) / 3);
box-sizing: border-box; 
}

<div class="flex-container">
<div class="flex-item color spacing">1</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">4</div>
<div class="flex-item color spacing">5</div>
<div class="flex-item color spacing">6</div>
<div class="flex-item color spacing">7</div>
<div class="flex-item color spacing">8</div>
</div>

如果您希望最后两个div只占用第一列和第二列，那么在.flex-item中使用width而不是flex。

.flex-item {
width: calc((100% - 2rem) / 3);
box-sizing: border-box; 
}

因此如下所示：

.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.color {
background-color: limegreen;
}
.spacing {
padding: 1em;
}
.flex-item {
width: calc((100% - 2rem) / 3);
box-sizing: border-box; 
}

<div class="flex-container">
<div class="flex-item color spacing">1</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">4</div>
<div class="flex-item color spacing">5</div>
<div class="flex-item color spacing">6</div>
<div class="flex-item color spacing">7</div>
<div class="flex-item color spacing">8</div>
</div>

Answer 2

您需要做两件事：

1. 使用：box-sizing: border-box更改flex-item的box-sizing以包括填充
2. 在计算中包括间隙。我建议您为间隙使用CSS变量：calc((100% - (2 * var(--gap))) / 3)

:root { 
--gap: 1rem;
}
.flex-container {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.color {
background-color: limegreen;
}
.spacing {
padding: 1em;
}
.flex-item {
box-sizing: border-box;
flex: calc((100% - (2 * var(--gap))) / 3);
}
.span-2 {
flex: calc(((100% - (2 * var(--gap))) / 3) * 2 + var(--gap));
}

<div class="flex-container">
<div class="flex-item color spacing">1</div>
<div class="flex-item color spacing span-2">2</div>
<div class="flex-item color spacing">2</div>
<div class="flex-item color spacing">4</div>
<div class="flex-item color spacing">5</div>
<div class="flex-item color spacing">6</div>
<div class="flex-item color spacing">7</div>
<div class="flex-item color spacing">8</div>
</div>

Answer 3

使.flex-item内元素中的填充/边距

.flex-container {
display: flex;
flex-wrap: wrap;
}
.color {
background-color: limegreen;
}
.spacing {
margin: 1em;
}
.flex-item {
flex: calc(100% / 3);
}

<div class="flex-container">
<div class="flex-item"><div class="color spacing">1</div></div>
<div class="flex-item"><div class="color spacing">2</div></div>
<div class="flex-item"><div class="color spacing">2</div></div>
<div class="flex-item"><div class="color spacing">4</div></div>
<div class="flex-item"><div class="color spacing">5</div></div>
<div class="flex-item"><div class="color spacing">6</div></div>
<div class="flex-item"><div class="color spacing">7</div></div>
<div class="flex-item"><div class="color spacing">8</div></div>
</div>

Answer 4

您可以通过添加此css 来简单地禁止填充添加到总宽度中

.flex-item {
box-sizing: border-box;
}