css - 在一个方向上对齐和间距 flex

Question

你好，我有一个酒吧应用

 <AppBar position="sticky" className={classes.appBar} >
        <Container maxWidth="lg">
        <Toolbar className={classes.root}>
        <Typography noWrap>
        <img src={require("./nodejs-icon.svg")} alt="bug" height={100} />
          </Typography>
              <SearchIcon color="secondary" />
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          {auth && (
            <div>
              <IconButton
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="secondary"
              >
                <ShoppingCartOutlinedIcon  style={{ fontSize: 50 }} />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={open}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
        </Container>
      </AppBar>

我有以下 CSS 设置:

const headerStyle = (muiBaseTheme => ({
  root:{
    padding: 0,
    margin: 0,
    display: 'flex',
    width: '100%',
    background: "#fff",
    }, 
    appBar:{
      background: "#fff",
      boxShadow:
      "0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.0)",
    },
    flexEnd:{
      alignItems: 'flex-end'
    },
    flexStart:{
      alignItems: 'flex-start'
    },
    flexCenter:{
      alignItems: 'center'
    }
}))

我用 fex 显示声明了我的工具栏并希望对齐元素并创建间距

我需要开头的图片

中间的输入

和最后的图标

但是我不知道怎么办

有人可以帮助我如何响应式地执行此操作吗？

Answer 1

将 CSS justify-content: space-between; 添加到您的 Toolbar 元素，因为它是您要对齐的元素的父元素，并且应该这样做工作。您可以阅读更多here .这是我做的一个样例，你应该可以得到。

.appbar,
.container,
.toolbar{
  width: 100%;
}

.toolbar{
  display: flex;
  /* Answer you need*/
  justify-content: space-between;
}

.toolbar > div{
  display: inline-block;
  width: 30px;
  text-align:center;
}

.toolbar > div:nth-child(1){
  background:red;
}
.toolbar > div:nth-child(2){
  background:yellow;
}
.toolbar > div:nth-child(3){
  background:green;
}

<div class="appbar">
  <div class="container">
    <div class="toolbar">
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </div>
  </div>
</div>