Flex-basis不扩展宽度[重复]

Posted 2023-03-06

【中文标题】Flex-basis不扩展宽度[重复]

【英文标题】：Flex-basis not expanding width [duplicate]

【发布时间】：2018-03-24 18:50:21

【问题描述】：

我有一个以列模式显示项目的容器。我希望这些项目具有“最小宽度”，以便它们对齐。

我试图仅使用 flexbox 属性来实现此结果。我可能遗漏了一些东西，但你知道为什么flex-basis 总是影响高度吗？

https://codesandbox.io/s/vjm6zo5l23

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
`;

const Item = styled.div`
  display: flex;
  flex-direction: row;
  border: 1px solid;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 3px;
  flex: 200px;
`;

const App = () =>
  <Container>
    <Item>test</Item>
    <Item>test</Item>
    <Item>test</Item>
    <Item>test</Item>
    <Item>test</Item>
  </Container>;

在这个例子中，我期望 Item 的宽度为 200px，因为我的 flex 方向是行。但不管 flex-direction 是什么，flex-basis 总是会影响高度。

【问题讨论】：

对于flex-direction: row，所有灵活性属性（例如，flex、flex-basis 等）都会影响宽度。使用flex-direction: column，他们可以控制高度。

我不理解的部分是我的 flex-direction 是行，并且仍然不影响宽度。对不起，但我还是很困惑:(

flex-basis 仅适用于弹性项目。弹性容器是column，这就是他们控制高度的原因。在您的行方向容器的子级上，它们将控制宽度。

@AlanSouza 我怀疑这里的主要混淆是你认为你在结合display: flex; flex-direction: row; flex: 200px 为Item 规则时，它们应该是200px 宽？ ......如果是的话，那就是你误解它的地方。 flex: 200px 设置在项目上，但作用于 display: flex 在其父项（具有flex-direction: column）上设置的内容，在这种情况下为Container，而您在Item 上的display: flex; flex-direction: row 将影响Item 的孩子。 ...这有意义吗？

是的，我现在明白了！谢谢@LGSon

【参考方案1】：

如果您在父元素或

flex-container

上使用了flex-direction: column，

flex-basis 将影响元素的高度。在您的情况下，您可以在弹性项目上使用 min-width: 200px。

【讨论】：

谢谢。所以我需要确保我的父母都没有flex-direction: column 才能在flex-direction: row 中使用flex-basis？

不，如果您使用了display: flex，则只是第一个父元素，它是 flex-container

如果你在 flex-container 上有 row 方向，flex 属性将修改 flex-children 的宽度，但如果你在父级上使用了列，那么 flex 属性将修改 flex 项的高度，在这种情况下，您在 flex 项目上设置的 flex-direction 并不重要。

是的。我一定是错过了什么，我真的很抱歉我没有得到这个。但是看看这个例子：codesandbox.io/s/9jpk3qq2qp

@AlanSouza，参考副本。你的大部分问题都在那里得到解答。请参阅 flex-shrink 因素 部分了解对上一个问题的解释。