如何使用 Material-UI Grid 组件正确实现此布局

Question

我正在尝试使用 Grid 组件在 Material-UI 中实现此布局。

我用红色突出显示了容器边框，以便更清楚地看到边界在哪里。

• 添加按钮应位于容器的右端
• 芯片应在左侧对齐，并在水平方向占用尽可能多的空间

• 筹码堆叠时，添加按钮应与容器底部垂直对齐

我已经设法使用嵌套网格来实现这一点，如下例所示：

import React, { useState } from 'react'
import { Button, Grid, Chip, Box } from '@material-ui/core'

export default function App() {
  const [chips, setChips] = useState(1)

  const addChip = () => setChips(c => c + 1)
  const removeChip = i => setChips(c => c - 1)

  const renderChips = () =>
    Array(chips)
      .fill(null)
      .map((_, i) => (
        <Grid item key={i}>
          <Chip label={`Chip ${i}`} onDelete={() => removeChip(i)} />
        </Grid>
      ))

  return (
    <Box border="1px solid red">
      <Grid container wrap="nowrap" spacing={2}>
        <Grid item xs>
          <Grid container spacing={1}>
            {renderChips()}
          </Grid>
        </Grid>
        <Grid item display="flex" component={Box}>
          <Grid container alignItems="flex-end">
            <Grid item>
              <Button variant="contained" color="primary" onClick={addChip}>
                Add
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  )
}

我希望避免不必要地嵌套 Grid 组件。更具体地说，我想使用<Grid item container> 而不是包含<Grid item> 的<Grid container>，但是使用这种方法我无法实现这种扩展左侧芯片部分并保持右侧按钮的布局，同时保持它垂直对齐底部。

Answer 1

尝试使用以下块

<Box border="1px solid red" style={{'postion':'relative'}}>
      <Grid container spacing={2} style={{'padding': '1px 80px 1px 1px'}}>
            {renderChips()}
      </Grid>
      <Button variant="contained" color="primary" onClick={addChip} style={{'position':'relative', 'float': 'right', 'bottom': '35px'}}>
                Add
      </Button>    
</Box>

而不是

<Box border="1px solid red">
      <Grid container wrap="nowrap" spacing={2}>
        <Grid item xs>
          <Grid container spacing={1}>
            {renderChips()}
          </Grid>
        </Grid>
        <Grid item display="flex" component={Box}>
          <Grid container alignItems="flex-end">
            <Grid item>
              <Button variant="contained" color="primary" onClick={addChip}>
                Add
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>

Answer 2

你的网格结构与你想要得到的不一致：

|-----------------------------|-----|
| item1 | item2 | item3 |     |     |  
| item4 | item... | item 20   |     |
| item 21 ...                 | Add |
|-----------------------------|-----|

如果您将其分成两列 - Add 按钮将永远不会按照您的意愿对齐。

相反 - Add 不应该拥有它自己的列 - 但应该是主块的一部分（相同的元素流）。您唯一需要做的就是确保它位于右侧，您可以通过margin-left: auto 获得它：

<Box border="1px solid red">
  <Grid container wrap="nowrap" spacing={2}>
    <Grid item xs>
      <Grid container spacing={1}>
        {renderChips()}
        <Grid item style={{ marginLeft: "auto" }}>
          <Button variant="contained" color="primary" onClick={addChip}>
            Add
          </Button>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</Box>

这是基于您的原始沙箱的上述实现：https://codesandbox.io/s/grid-item-stick-to-right-3xzj2?file=/src/App.js