如何更改 flexbox 包装?
[英] How to change flexbox wrap?
本文介绍了如何更改 flexbox 包装?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的应用程序中有一个响应式 flexbox 框，其中包含动态呈现的卡片(每个 api 调用呈现 1-10 张卡片).除了它的包装方式外，它几乎完全符合我的要求.
假设我渲染了 10 张卡片，如果我调整屏幕大小使其变成例如4-4-2 最后 2 张卡片居中，我希望它可以包裹起来，所以最后 2 张卡片从左边开始，并且像上面的卡片一样间距相等.你怎么能这样做?
编辑以进一步阐述:假设我进一步调整为 1-1-1-1-1-1-1-1-1-1 ，卡片应该居中，我仍然需要居中，但我想要如果变成 4-4-2 或 3-3-2 等，则从左侧开始包装的最后 2 张牌.
https://codepen.io/hyrosian/pen/EXKZJz
.card {文本对齐:居中；box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;最大宽度:300px；保证金:2rem；填充底部:1rem;}.容器 {padding-right: 15px;左边距:15px；右边距:自动；左边距:自动；}.recipe-grid {显示:弹性；flex-wrap: 包裹;justify-content: space-around}
<div class="recipe-grid"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
解决方案
如果使用 Flexbox，并且没有脚本，您可以创建 ghost 元素，以便它们填充最后一行的空间.
因此，对于可能的 4 列长度，您需要 3 个 ghost 元素，依此类推.
也可以使用伪元素，这会将所需的ghost 减少 2.
.card {文本对齐:居中；box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;最大宽度:300px；保证金:2rem；填充底部:1rem;}.card:空{宽度:300px；框阴影:无；保证金:2rem；填充底部:0;}.容器 {padding-right: 15px;左边距:15px；右边距:自动；左边距:自动；}.recipe-grid {显示:弹性；flex-wrap: 包裹;justify-content: space-around}
<div class="recipe-grid"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card"></div><div class="card"></div><div class="card"></div>
<小时>更新
由于您使用 justify-content: space-around，您也可以这样做，在 card 周围添加一个额外的包装器，将其居中，然后，使用媒体查询，让包装器根据每行的项目数量填充行.
注意，由于不能在媒体查询中使用 CSS calc，所以值基于 1rem 等于 16px，所以第一个是这样计算的:300px + (2rem * 2) = 728px 等等.因此，如果您的浏览器在 root 元素上的默认字体大小不是 16px，您可以将其设置为, 或者重新计算查询值
.card {文本对齐:居中；box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;最大宽度:300px；保证金:2rem；填充底部:1rem;}.容器 {padding-right: 15px;左边距:15px；右边距:自动；左边距:自动；}.recipe-grid {显示:弹性；flex-wrap: 包裹;justify-content: flex-start;}.recipe-grid .card-wrapper {显示:弹性；对齐内容:居中；宽度:100%；}@media (min-width: 728px) { .recipe-grid .card-wrapper { width: 50%;} }@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%;} }@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%;} }@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%;} }
<div class="recipe-grid"><div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<div class="card-wrapper"><div class="card"><img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"><h3>鸡蛋牛肉三明治</h3><p>604 kcal - 完全素食 </p>
<小时>最后，我还想提一下这些帖子，how-to-center-a-flex-container-but-left-align-flex-items 和 can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in(可能被认为是它的重复)，因为它很好地解释了 Flexbox 在包装和居中项目的能力方面是如何工作的，以及一些比一个是我给的.
I have a responsive flexbox box with dynamically rendered cards (from 1-10 cards rendered each api call) in my application. It Almost does exactly what i want it to do except the way it wraps.
Let's say i rendered 10 cards, if i resize screen so it turns into e.g. 4-4-2 the last 2 cards are centered, i want it to wrap so the last 2 cards start from the left and with equal spacing like the cards above. How can you do that?
EDIT to eloborate further: let's say i resize even further into 1-1-1-1-1-1-1-1-1-1 , the cards should appear centered, i still need the centering, but i want the last 2 cards to wrap from the left side if it turns into 4-4-2 or 3-3-2 etc.
https://codepen.io/hyrosian/pen/EXKZJz
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}
<div class="container">
<div class="recipe-grid">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
</div>
解决方案
If to use Flexbox, and without script, you could create ghost elements, so they fill out the space on the last line.
So for a possible column length of 4, you need 3 ghost element and so on.
It is also possible to use the pseudo elements, which will decrease the needed ghost's by 2.
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.card:empty {
width: 300px;
box-shadow: none;
margin: 2rem;
padding-bottom: 0;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}
<div class="container">
<div class="recipe-grid">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Updated
Since you use justify-content: space-around, you could also do like this, where you add an extra wrapper around the card, center it and then, with media queries, make the wrappers fill the line based on the amount of items per row.
Note, since one can't use CSS calc in the media query, the values are based on 1rem equals 16px, so the first is calculated like this: 300px + (2rem * 2) = 728px and so on. So if your browsers's default font size on the root element is anything but 16px, you either set it to that, or recalculate the query values
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.recipe-grid .card-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
@media (min-width: 728px) { .recipe-grid .card-wrapper { width: 50%; } }
@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }
@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%; } }
@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%; } }
<div class="container">
<div class="recipe-grid">
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
</div>
</div>
Finally, I also want to mention these posts, how-to-center-a-flex-container-but-left-align-flex-items and can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in (which might can be considered a duplicate to this), as it has a great explanation how Flexbox works when it comes to its ability to both wrap and center items, and some more solutions than the one's I gave.
这篇关于如何更改 flexbox 包装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
