Flex-basis不扩展宽度

Question

我有一个容器，其中的项目以列模式显示。我希望这些项目的最小宽度为＃34;这样他们就会对齐。

我试图仅使用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方向是row。但无论弯曲方向如何，flex-basis总是会影响高度。

Answer 1

如果您在父元素或 flex-container 上使用了flex-basis，则

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