Javascript 柔性基础不扩展宽度

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

我试图仅使用flexbox属性来实现此结果。我可能遗漏了什么，但是你知道为什么

flex-basis

总是影响高度吗

const Container=styled.div`
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
`;
const Item=styled.div`
显示器：flex；
弯曲方向：行；
边框：1px实心；
边缘顶部：6px；
边缘底部：6px；
填充：3倍；
flex:200px；
`;
常量应用=（）=>
测试
测试
测试
测试
测试
;

---

在本例中，我希望项目的宽度为200px，因为我的伸缩方向是行。但无论弹性方向如何，

弹性基础始终会影响高度。
弹性基础
如果在父元素或弹性容器上使用了
弹性方向：列
，则会影响元素的高度。在您的情况下，您可以在弹性项目上使用
最小宽度：200px
。
使用
弹性方向：行
，所有弹性属性（例如
弹性
，
弹性基础
等）都会影响宽度。使用
flex-direction:column
，它们控制高度。我不理解的是，我的flex-direction是row，但仍然不影响宽度。对不起，我还是很困惑：（
flex basis
仅适用于flex项目。flex容器是
列
，这就是它们控制高度的原因。在行方向容器的子容器上，它们将控制宽度。@AlanSouza我怀疑这里的主要混淆是，当组合
显示：flex；flex-direction:row；flex:200px
对于
项
规则，它们应该是200px宽？…如果是，这就是您误解它的地方。
flex:200px
设置在项上，但作用于其父项上设置的
display:flex
（具有
flex-direction:column
），在这种情况下，
容器和
显示：flex；flex direction:row
将影响
项的子项
…这有意义吗？是的，我现在明白了！谢谢@lgsonThank。所以我需要确保我的父母都没有
flex direction:column
可以使用<代码>弹性基础
在
弹性方向：行
？不，如果使用
显示：弹性
则仅第一个父元素，即弹性容器。如果弹性容器上有
行
方向，
弹性
属性将修改弹性子元素的宽度，但如果使用父元素上的列，则
弹性
属性将修改flex项目的高度，以及您在flex项目上设置的flex方向在此上下文中并不重要。是的。我一定是遗漏了什么，我真的很抱歉我不明白。但看看这个例子：@AlanSouza，参考副本。您的大多数问题都在这里得到了回答。请参阅
flex shrink
factor部分了解e解释你的最后一个问题。
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>;