带有3个项目的行的网格布局，每个项目的宽度是自动的

Question

我在实现此布局时遇到问题：

我需要左右元素的宽度是自动的，并且要覆盖位于中心的元素左右两侧的所有空白空间。

这是我能做的最接近的事情，但是问题是中心项目的宽度固定为容器的12个单位中的2个，左右行分别固定为5个单位

<Grid container direction='row' alignItems='center' justify='center' style={{ width: '100%', textAlign:'center' }}>
    <Grid item xs='5'>
        <Divider />
    </Grid>
    <Grid item xs='2'>
        <span>or</span>
    </Grid>
    <Grid item xs='5'>
        <Divider />
    </Grid>
</Grid>

我正在使用material-ui reactjs库。 谁能帮我？我愿意帮助使用材料ui库或使用CSS / JS答案

Answer 1

您可以使用"Auto layout"列，而不是使用显式的列宽（例如，xs='5'），只需为需要拉伸（也称为xs）的所有项目指定flex-grow: 1通过的方式。请勿将其设置为带有文本的中间项目，以使其不会拉伸并保持自动宽度。该解决方案可以在this codepen中找到。