为啥 flex 属性在反应样式的组件中不起作用？

Posted 2023-02-21

【中文标题】为啥 flex 属性在反应样式的组件中不起作用？

【英文标题】：why isnt the flex attribute working in react styled components?为什么 flex 属性在反应样式的组件中不起作用？

【发布时间】：2022-01-13 11:28:54

【问题描述】：

好的，所以我的代码一点也不复杂。我正在观看关于反应样式组件的教程，我的代码到了这一点：

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

所以基本上发生的事情是我在同一行上创建了 3 个组件，分别命名为 Left、Center 和 Right 组件，并将它们放在一个 Wrapper 组件中。 flex 属性的作用是在浏览器上为 Left、Center 和 Right 组件提供相等的空间。这意味着如果 Left 内部有一些长字符串（如上所示），则 Center 和 Right 组件保持其位置并且不会被推到侧面以容纳 Left。它本来可以工作，但是当我打开浏览器时，我看到的是：

loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm中心右

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

【参考方案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;
`