为什么flex属性在react样式的组件中不起作用

Question

好的，所以我的代码一点也不复杂。我正在看一个关于反应风格组件的教程，我的代码已经到了这个地步：

const Container = styled.div
`height: 60px;
`
const Wrapper = styled.div`
padding : 10px 20px;
display : flex;
justify-content : space-between;
`
const Left = styled.div`
flex : 1;
`
const Center = styled.div`
flex: 1;
`
const Right = styled.div`
flex : 1;
`

这是代码的其余部分：

const Navbar = () => {
return (
<Container>
<Wrapper>
<Left>loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</Left>
<Center>Center</Center>
<Right>Right</Right>
</Wrapper>
</Container>
)
}
export default Navbar

基本上，我在同一行创建了三个组件，分别命名为Left、Center和Right组件，并将它们放入Wrapper组件中。flex属性的作用是在浏览器上为"左"、"中"one_answers"右"零部件提供相等的空间。这意味着，如果"左"(如上图所示(内部有一些长字符串，则"中心"one_answers"右"组件将保持其位置，不会被推到一边以适应"左"。它本来是可以工作的，但当我打开浏览器时，我看到的是：

loremmmmmmmmmmm

这意味着flex属性显然不起作用？有人知道我做错了什么吗？顺便说一句，我正在观看的教程于2021年9月刚刚发布，所以我对此表示怀疑，因为语法或其他方面发生了变化，但如果是这样，请指出。

Answer 1

这是因为flex试图通过围绕元素边界组织来根据比例调整大小，或者在文本的情况下组织单词。

但这并不是一条绝对的规则。既然你有一个巨大的单词无法包装，那么在这种情况下，flex会尽其所能。类似于你通常不想为了尊重比例而不惜一切代价分解或隐藏大按钮的部分。这称为溢出。

如果普通单词的段落大小不同，CSS应该可以工作。

一个选项是隐藏溢出或显示滚动条：

const Left = styled.div`
flex : 1;
overflow: hidden; # also scroll
# text-overflow: ellipsis; # Optional to show a nicer "Loremmmmm..."
`

或者，你可以允许在字母边界上包装——分解长单词也可以实现灵活的比例：

const Left = styled.div`
flex : 1;
overflow-wrap: anywhere;
`