Макет сетки со строкой из 3-х элементов, ширина каждого элемента автоматически

Question

У меня проблемы с достижением этого макета:

Мне нужно, чтобы ширина правого и левого элементов была автоматической и охватывала все пустое пространство справа и слева от элемента, находящегося в центре.

Это самая близкая вещь, которую я мог бы сделать, но проблема в том, что ширина элемента центра установлена ​​на 2 из 12 единиц контейнера, а правая и левая линии - на 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-uiactjs. Может кто-нибудь мне помочь? Я открыт, чтобы помочь с использованием библиотеки Mterial UI или с ответом css / js

Answer 1

Вместо использования явной ширины столбцов (например, xs='5') вы можете использовать "Автоматическое размещение" столбцов, просто указав xs для элементов, которые должны растягиваться (иначе flex-grow: 1) для всех путь через. Не устанавливайте его для среднего элемента с текстом, чтобы он не растягивался и сохранял автоматическую ширину. Решение можно найти в этом коде .