使用 Flexbox 和 Material UI 使 Item 位于底部答案

【问题标题】：Make Item go the bottom using Flexbox and Material UI使用 Flexbox 和 Material UI 使 Item 位于底部
【发布时间】：2019-10-15 01:00:29
【问题描述】：

我正在尝试将未分配的文本添加到容器底部，如下样机所示：

以下是我目前拥有的代码。我也在努力让播放按钮之间的边界也能正常工作。我已经尝试了通常的 css：bottom:0 和 position:relevant 以及 Flexbox，但它似乎不想进入容器的最底部。

 const styles = theme => ({
  root: {
    flexGrow: 1,
    overflow: 'hidden',
    padding: theme.spacing(0, 3),
  },
  paper: {
    maxWidth: 800,
    margin: `${theme.spacing(2)}px auto`,
    padding: theme.spacing(2),
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
  playButton: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "60%",
      left: "-55px",
      transform: "translateY(-50%)",
    },
      "& .star-rating": {
        "& .fa-star": {
          "&:hover": {
            "&::before": {
              content: "\f005",
              color: "yellow"
            }
          }
        }
      },
    },
});

function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6" gutterBottom>
              {props.name}
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                {props.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item classes={{ root: props.classes.playButton}}>
    <Grid item xs={3} className="playButton">
      <i class="far fa-play-circle fa-2x"></i>
    </Grid>
    <div className="workers-assigned-label">
      Workers Assigned
    </div>
    <Typography variant="h6" gutterBottom>
        0/25
      </Typography>
      <div class="star-rating">
        <label class="far fa-star fa-2x"></label>
        <label class="far fa-star fa-2x"></label>
        <label class="far fa-star fa-2x"></label>
      </div>
    <div className="dropdown-menu">
  <h5>Unnassigned</h5>
</div>
  </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);

任何输入都会很棒。

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

您可以尝试这样的事情，或者将flex: 1 给列中的任何内容以使其伸展。

const styles = theme => ({
  playButton: {
    '& .dropdown-menu': {
      marginTop: "auto"
    }
  }
})

【讨论】：

我已经尝试过了，但它并不完全位于最底部，我认为在 Material UI 中，Paper 组件默认情况下有填充，我试图覆盖它，但后来它混乱了与布局。

【解决方案2】：

我建议从看起来像这样的网格“骨架”开始：

<Grid container>
  <Grid item container xs={8} direction="column" justify="flex-start">
    // Left column contents, with each row as a <Grid item>
  </Grid>
  <Fab className={classes.fab}><PlayIcon /><Fab>
  <Grid item container xs={4} direction="column" justify="space-between" className={classes.right}>
    // Right column contents, with each row as a <Grid item>
  </Grid>
</Grid>

direction=column 将帮助您在每个容器中垂直定位项目。 justify=space-between 将确保您的第一项位于容器的顶部，而您的最后一项（未分配的文本）位于底部。

“正确的”css 类如下所示：

right: {
  borderLeft: `1px solid ${theme.palette.grey[500]}`,
  position: "relative"
}

您可以给它一个“相对”的位置，以便更容易地相对于列定位晶圆厂。 “fab”类看起来像：

fab: {
  position: "absolute",
  margin: "auto",
  top: 0,
  bottom: 0,
  left: -28
}

margin、top 和 bottom 属性有助于工厂垂直居中，而左侧则根据工厂的尺寸将其置于边框上。

这是一个将所有内容整合在一起的工作草案：https://codesandbox.io/s/tender-torvalds-dlbke?fontsize=14

【讨论】：

看起来不错。谢谢。