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

Question

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

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

这是我能做的最接近的事情，但问题是中心项目的宽度固定为容器 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 answer

Answer 1

您可以使用 "Auto layout" columns by just specifying xs for the items that need to stretch (aka flex-grow: 1) all the way through. Do not set it for the middle item with text so that it does not stretch and it would retain auto width. The solution can be found in this codepen .

而不是使用明确的列宽（如 xs='5'）

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

Grid layout with a row with 3 items that the width of each item is auto

html

css

grid-layout

reactjs

material-ui