html - 一行有 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 库。 谁能帮我？我愿意帮助使用 mterial ui 库或 css/js 答案

Answer 1

您可以使用 "Auto layout" 而不是使用明确的列宽(如 xs='5')只需为需要拉伸(stretch)的元素(又名 flex-grow: 1)指定 xs 即可。不要为带有文本的中间元素设置它，这样它就不会拉伸(stretch)并且会保留自动宽度。可以在下面的代码片段中找到解决方案。

const { Grid, Divider } = MaterialUI;

function App() {
  return (
<Grid
  container
  direction="row"
  alignItems="center"
  justify="center"
  style={{ width: "100%", textAlign: "center" }}
>
  <Grid item xs>
    <Divider />
  </Grid>
  <Grid item>
    <span>or</span>
  </Grid>
  <Grid item xs>
    <Divider />
  </Grid>
</Grid>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="app"></div>