时间戳

首页 > 解决方案 > 网格布局，一行包含 3 个项目，每个项目的宽度都是自动的

html - 网格布局，一行包含 3 个项目，每个项目的宽度都是自动的

问题描述

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

布局

布局模式

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

这是我能做的最接近的事情，但问题是中心项目的宽度固定为容器的 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 库。谁能帮我？我愿意帮助使用 mterial ui 库或 css/js 答案

标签： htmlcssreactjsmaterial-uigrid-layout

解决方案

xs='5'您可以使用“自动布局”列，而不是使用明确的列宽（如） ，只需指定xs需要一直拉伸（又名flex-grow: 1）的项目。不要为带有文本的中间项目设置它，这样它就不会拉伸并保持自动宽度。可以在这个 codepen中找到解决方案。

推荐阅读