为什么这些 div 的对齐方式都不同？答案

【问题标题】：Why are these divs all aligned differently?为什么这些 div 的对齐方式都不同？
【发布时间】：2021-01-11 02:45:32
【问题描述】：

我们正在使用基于 flexbox 的前端框架 (Material-UI)，我奇怪地发现所有这些组件（特别是数量控制位）的布局都不同，即使它们'都使用相同的样式和代码。

看看：

我几乎可以肯定这是一个 flexbox 问题，而不是 Material UI 问题。你知道这里发生了什么吗？注意：所有样式都是内联完成的。

代码示例

注意：这是每个<Card>s 的代码，每个都使用listing 作为包含它需要呈现的数据的道具。

<Card style={{ display: "flex", height: "13em" }}>
  <CardMedia title={listing.productTitle}>
    <img src={listing.mainImgUrl} style={{ width: "13em" }} />
  </CardMedia>
  <Box display="flex" flexDirection="column">
    <CardContent style={{ flex: "1 0 auto" }}>
      <Typography component="h6">{listing.productTitle}</Typography>
      <Typography variant="subtitle1" color="textSecondary">
        by {listing.creatorUsername.length > 16 ? `${listing.creatorUsername.substring(0, 13)}...` : listing.creatorUsername}
      </Typography>
    </CardContent>
    <Box display="flex" alignItems="center" justifyContent="flex-end" mb={1}>
      <Box display='flex' alignItems='center'>
        <Box mr={2}>
          <Typography variant='body2'>${localQuantity * listing.price}</Typography>
        </Box>
      <Select
        name="quantity"
        value={localQuantity}
        onChange={handleChange}
        variant="outlined"
        disabled={disabled.quantity}
      >
        {getQuantityOptions(listing.numAvailable)}
        </Select>
      <IconButton>
        <DeleteOutline />
      </IconButton>
      </Box>
    </Box>
  </Box>
</Card>

感谢您的帮助！

【问题讨论】：

问题似乎是CardContent 将其大小设置为适合内容。我不确定你想做什么。将数量组件放在右下角或设置在底部中心。
这是一个有趣的想法，@Titus。我正在尝试右对齐数量组件。
看起来组件CardContent 丢失了flex-grow: 1（出于某种原因）您可以尝试删除style={{ flex: "1 0 auto" }} 并将其替换为flexGrow={1}
该死，这行不通@CedricCholley。它没有改变任何东西。不过感谢您的关注。

标签： javascript css reactjs flexbox material-ui

【解决方案1】：

我最终放弃了<CardContent> 标签，因为它对布局做了一些时髦的事情。这是我最终得到的解决方案（基本上使用<Box>es（基本上是直接<div>）：

       <Card style={{ display: "flex", height: "13em" }}>
        <CardMedia title={listing.productTitle}>
          <img src={listing.mainImgUrl} style={{ width: "13em" }} />
        </CardMedia>
        <Container>
          <Box mt={2}>
            <Box display="flex" alignContent="flex-start">
              <Box display="block">
                <Typography component="h6">{listing.productTitle}</Typography>
                <Typography variant="subtitle1" color="textSecondary">
                  by{" "}
                  {listing.creatorUsername.length > 16
                    ? `${listing.creatorUsername.substring(0, 13)}...`
                    : listing.creatorUsername}
                </Typography>
                <Typography variant="caption" color="textSecondary">
                  ${listing.price} each
                </Typography>
              </Box>
            </Box>
            <Box
              display="flex"
              alignContent="flex-end"
              justifyContent="flex-end"
              my={1}
            >
              <Box display="flex" alignItems="center">
                <Box mr={2}>
                  <Typography variant="body2">
                    ${listing.quantity * listing.price}
                  </Typography>
                </Box>
                <Select
                  name="quantity"
                  value={listing.quantity}
                  onChange={handleChange}
                  variant="outlined"
                  disabled={disabled.quantity}
                >
                  {getQuantityOptions(listing.numAvailable)}
                </Select>
                <IconButton onClick={handleDelete}>
                  <DeleteOutline />
                </IconButton>
              </Box>
            </Box>
          </Box>
        </Container>
      </Card>

【讨论】：

【解决方案2】：

将卡片内容后的 Box 设置为 100% 宽度，然后您可以在里面的第一个元素上使用 margin-left:auto 来使其右对齐。当我无法运行代码时，它有点难以猜测:)

【讨论】：