CSS flexbox（flex-grow / flex-basis） - 相同的宽度，但不包装 [英] CSS flexbox (flex-grow / flex-basis) - Same width, but doesn't wrap anymore

问题描述

我使用flexbox来组织页面上的元素。

我想让flexbox使用所有可用的水平空间，所以我添加成长：1 。

然后，我想让同一行上的每个项目具有相同的大小（例如，如果有两个项目，33％如果有三个等等），所以我添加 flex-basis：0 。

在第三步，项目不再包装。如果我改变窗口宽度，每行的项目数总是相同，并且它们的内容被挤压。我不想要。我想要一个项目放在下一行，当他们的宽度变得比它的内容小，因为它的工作在前两个步骤。我试着用 flex-shrink 和其他东西玩，没有成功。

我该怎么办？感谢！

回答TL; DR：添加 min-width：fit-content 工作！

---

解决方案＃2

在较小屏幕上垂直堆叠flex项目的另一种方法是更改​​ flex-direction ： p>

  @media screen and（max-width：500px）{
 ul {flex-direction：column; } 
 li {flex-basis：auto; } 
} 
  

DEMO： https://jsfiddle.net/s6kgmkn6/4/

I use flexboxes to organize elements on my page.

I want the flexboxes to use all available horizontal space, so I add flex-grow:1.

Then I want each item on the same line to be of the same size (e.g. 50% each if there is two items, 33% if there is three, etc), so I add flex-basis:0.

But at the third step, the items don't wrap anymore. If I change the window width, the number of items per line stays always the same, and their content is squeezed. I don't want that. I want an item to be put on the next line when their width become smaller than it's content, as it works in the first two steps. I tried playing with flex-shrink and other things, without success.

What can I do ? Thanks !

Answer TL;DR: Adding min-width: fit-content works !

JSFiddle

解决方案

Although you have flex-wrap set to wrap, there is no width defined for the flex items (li), and you have flex-basis set to 0. This means that the initial main size of the flex items is 0. It won't wrap because it can shrink to zero (even if the flex-shrink property is 0).

Solution #1

One thing you can do is set the flex-basis property to content or auto.

li { flex-basis: auto; }

This tells the flex item to factor in the width of its content.

DEMO: https://jsfiddle.net/s6kgmkn6/3/

flex-basis

The initial main size of the flex item.

auto

When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is also auto, then the used value is content.

content

Indicates automatic sizing, based on the flex item’s content.

Note: Note that content was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size (width or height) of auto.

This diagram from the flexbox spec tries to explain the difference between flex-basis: 0 and flex-basis: auto. Personally, I don't find it very clear or helpful. But visit the source page for more details.

---

Solution #2

Another method to vertically stack flex items on smaller screens is to change the flex-direction in a media query:

@media screen and ( max-width: 500px ) {
    ul { flex-direction: column; }
    li { flex-basis: auto; }
}

DEMO: https://jsfiddle.net/s6kgmkn6/4/

这篇关于CSS flexbox（flex-grow / flex-basis） - 相同的宽度，但不包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！