作者:手机用户2502899267 | 来源:互联网 | 2023-02-01 15:49
我的应用程序中有一个响应式flexbox框,其中包含动态呈现的卡片(每个api调用呈现1-10张卡片)。它几乎可以完全满足我的要求,除了它的包装方式。
假设我渲染了10张卡片,如果我调整屏幕大小,使其变成例如4-4-2,则最后两张卡片居中,我希望将其包裹起来,以便最后两张卡片从左侧开始并以相等的间距从上面的卡片开始。你该怎么做?
编辑以进一步阐述:假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1,卡片应居中显示,我仍然需要居中,但我希望最后2张如果卡变成4-4-2或3-3-2等,则从左侧缠绕卡。
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
}
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
LGSon..
5
如果要使用Flexbox,并且没有脚本,则可以创建ghost元素,以便它们填充最后一行的空间。
因此,对于可能为4的列长,您需要3个ghost元素,依此类推。
也可以使用伪元素,这将使所需的虚数减少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
}
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
更新
由于您使用justify-content: space-around
,所以您也可以这样做,即在周围添加一个额外的包装,将其card
居中,然后通过媒体查询,使包装根据每行项目的数量填充行。
请注意,由于不能CSS calc
在媒体查询中使用,因此值基于1rem
equals 16px
,因此第一个值的计算如下:300px + (2rem * 2) = 728px
依此类推。因此,如果您的浏览器在 元素上的默认字体大小是,则可以将其设置为,或者重新计算查询值root
16px
.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%; } }
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
最后,我还想提到这些帖子,如何将一个flex容器居中,但是如何将flex项左对齐,并且可以根据需要更改内容值的合理性元素数量输入(可能被认为是重复的),因为它很好地解释了Flexbox在包装和居中项目方面的工作方式,以及比其更多的解决方案我给了。
1> LGSon..:
如果要使用Flexbox,并且没有脚本,则可以创建ghost元素,以便它们填充最后一行的空间。
因此,对于可能为4的列长,您需要3个ghost元素,依此类推。
也可以使用伪元素,这将使所需的虚数减少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
}
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan
Egg beef sandwich
604 kcal - totally vegan