Flexbox:每个元素1/3的宽度，如果没有足够的空间落在彼此之下

Question

我正在寻找一种方法(与Flexbox，而不是网格)来创建一个布局，当我有一个容器与x卡在里面，里面的每张卡应该采取1/3的容器宽度。第1、2、3号牌在第一行，第4、5号牌…在第二行等等。我觉得用flexbox是不可能的，我不想检查项目的数量，我使用map在最多3张牌的容器中映射卡片，但我不喜欢这个解决方案。在我开始使用网格之前，我想了解一下是否有可能用Flexbox来完成。代码是:

<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>

Answer 1

您应该在卡片上设置box-sizing: border-box;，以便在其宽度中计算填充和边框。并设置其max-width: 33.33%。

body {
padding: 30px;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
background: orange;
}
.card {
box-sizing: border-box;
width: 100%;
text-align: center;
max-width: 33.33%;
padding: 50px 0;
background-color: aqua;
border: 1px solid #000;
}

<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>

Answer 2

差异将用于第二行。最后两个元素的宽度有两个选项。

选项1最后两个节点仅占33%的宽度，并将右侧留空。

您必须为.container使用display: flex; flex-wrap: wrap;，为.card使用display: flex; flex: 0 1 33%;。这里flex-shrink是为子

设置的

.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 100px;
display: flex;
flex: 0 1 33%;
justify-content: center;
align-items: center;
font-size: 50px;
}

<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>

选项2最后两个元素各使用50%的宽度。您必须将display: flex; flex-wrap: wrap;用于容器，并将display: flex; flex: 1 0 33%;用于子元素，即.card。这里flex-grow是为子

设置的

.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 100px;
display: flex;
flex: 1 0 33%;
justify-content: center;
align-items: center;
font-size: 50px;
}

<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>

Answer 3

Flex-wrap可以帮你解决这个问题

.container{
display: flex;
flex-wrap: wrap;
}
.card{
min-width: 33.3333%;
}

示例:https://codepen.io/jriches/pen/WNjVaav

Answer 4

在你的卡片类中使用33.33333333%的宽度