Question

我需要.child-1-2增长到它的文本，但文本溢出。当我将flex-basis的{{1}}从.child-1-1更改为50px时，它似乎有效。为什么会这样？

＆＃13;

auto

＆＃13;

.parent-1 {
  display: flex;
}

.child-1 {
  display: flex;
  flex: 0 0 auto;
  background: #4c72af;
}

.child-1-1 {
  display: flex;
  flex: 0 0 50px;
}

.child-1-2 {
  display: flex;
  flex: 1 0 auto;
}

.child-2 {
  display: flex;
  flex: 1 0 auto;
  background: #f7ed7e;
}

＆＃13;

Answer 1

为了理解所描述行为发生的原因，我们应该知道flex-basis和flex-grow的实际工作方式以及如何计算弹性项目的宽度。

Flex的生长

来自flex-grow is weird. Or is it?

如果我们应用display：flex;到父元素，不要改变其他任何东西，子元素将水平堆叠，没有有什么关系。如果没有足够的空间，它们的尺寸会缩小。如果另一方面，有足够的空间，他们不会成长，因为Flexbox希望我们定义他们应该增长多少。所以而不是告诉浏览器一个元素应该有多宽， flex-grow决定剩余空间如何分配弹性项目以及每个项目的份额有多大。

Flex的基础

弹性项目的宽度按以下顺序确定：

含量
宽度
flex-basis（受最大|最小宽度限制）

来自The Difference Between Width and Flex Basis

如果没有指定flex-basis，那么flex-basis将回退到   item的宽度属性。

如果未指定宽度，则flex-basis将回退到   计算项目内容的宽度。

为什么flexbox不会成长为它的文本？

1 个答案:

Flex的生长

Flex的基础