gpt4 book ai didi

css - 我怎样才能让 flex 元素在保持相同大小的同时增长?

转载 作者:技术小花猫 更新时间:2023-10-29 11:18:52 29 4
gpt4 key购买 nike

Flexbox 是网页设计师梦寐以求的最酷的工具之一。不幸的是,有时我应该做什么并不是很明显。以 this plunk 为例.我希望这些元素能够展开以填满行,而不是一直展开到最后一行。
我的 CSS 包含以下重要内容:

.recipe-picker recipe {
-webkit-flex: 0 1 8em;
flex: 0 1 8em;

height: 12em;
}

如果我将 0 更改为任何正数(对应于 flex-grow 属性),最后一行将以非常难看的方式拉伸(stretch)。其余元素表现相当不错,但最后一行应与其余元素保持相同大小。
我该怎么做才能解决此问题?

最佳答案

这是目前无法通过 CSS Flexbox 表达的东西。有人asked basically this exact question几天前在 CSS 工作组邮件列表上,以及 response是:“目前,不,这是不可能的。不过,这是 Flexbox 2 的高优先级元素。

虽然您可以使用 max-width 来破解一些您想要的东西——这将防止 flex 元素(特别是最后一行的元素)无限增长。这是一个 forked version of your plunk具有非零 flex-grow 和 max-width: 10em

(我随意选择了 10em;您也可以使用例如 max-width: calc(100%/5),如果您想确保每个 flex 元素占用例如,向上不超过直线的 1/5。)

关于css - 我怎样才能让 flex 元素在保持相同大小的同时增长?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28074473/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com