[英]How to make flex-wrap balance its wrapped items?
I am making a responsive layout, and on smaller screens a sidebar <ul>
is turning into a display: flex
with flex-wrap: wrap
and the items styled with flex-grow: 1
. 我正在制作一个响应式布局,在较小的屏幕上,侧边栏<ul>
正在变成一个display: flex
with flex-wrap: wrap
和使用flex-grow: 1
的项目flex-grow: 1
。 This looks fine most of the time: 这在大多数情况下看起来很好:
However, this looks pretty bad when only a couple of items overflow, such as on a slightly larger screen: 但是,当只有几个项目溢出时,这看起来非常糟糕,例如在稍大的屏幕上:
Is there any way to get flex-box
to attempt to wrap things based on having a balanced total item width per row? 有没有办法让flex-box
尝试根据每行平衡的总项目宽度来包装东西? For example, in the second example, it would make much more sense for "People" (and maybe "Protocols" as well) to flow to the second line. 例如,在第二个例子中,“人”(也可能是“协议”)流到第二行会更有意义。
Or, is there is an alternate approach I should be taking to lay this menu out? 或者,我是否应采取另一种方法来制作此菜单?
You could add a media query to change the behaviour in smaller viewports. 您可以添加媒体查询以更改较小视口中的行为。
For example: 例如:
@media (max-width: 768px) {
nav li {
min-width: 25%;
}
}
That way, at least you won't have more than 4 items per row on a small screen. 这样,至少在小屏幕上每行不会超过4个项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.