如何在FLEXBOX行中设置3个项目

Question

我想每行显示3个项目，但我想包括边距和边框。这是一个简单的例子，但我需要设置有效的flex属性

.box {
display: flex;
flex-wrap: wrap;
width: 1200px;
}
.item {
display: flex;
border: 1px solid #000;
margin: 5px;
flex: // ???
}

<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 1

就我对你问题的理解而言。

用gapproperty

代替margin

.box {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1;
width: 100%;
height: 200px;
border: 1px solid #000;
}
.item:nth-child(4),
.item:nth-child(5),
.item:nth-child(6) {
flex: 0 1 100%;
}

<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 2

我可能会这样做:既然你已经指定了一个固定的width值，你可以让每个项目都有一个max-width或400px - border and margin。然而，对于一个更动态的布局，你可以只在box上使用max-width: 1200px，所以它的大小和响应。

我更喜欢在flex布局中使用gap而不是margin。这样，你可以将每个项目max-width设置为33.33%(对于3行布局)，减去5px的gap和1px的border。此外，您不必在项目上使用display: flex，因为它们已经是flex-容器的孩子(除非您计划在其中包含更多内容)。这会产生如下结果:

.box {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
flex: 1; /* equal items */
gap: 5px;
}
.item {
border: 1px solid #000;
width: 100%;
max-width: calc(33.33% - 6px);
}

<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

然而，这也可以通过使用margin和固定的width来实现。然后你只需要在max-width计算中使用margin和border(5px + 5px + 1px + 1px)。请记住，当在布局中使用margin时，它也会影响容器和项目之间的margin，而不仅仅是项目之间的gap。

.box {
display: flex;
flex-wrap: wrap;
width: 1200px;
flex: 1; /* equal items */
}
.item {
border: 1px solid #000;
height: 20px;
margin: 5px;
width: 100%;
max-width: calc(33.33% - 12px);
}

<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

Answer 3

我宁愿在child上使用flex-basis。

.box {
display: flex;
flex-wrap: wrap;
width: 1200px;
}
.item {
display: flex;
border: 1px solid #000;
margin: 5px;
flex-basis: 30%
}

<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>