对齐项目 Flexbox , React Material in React

Question

我在我的 React 应用程序中使用 flexbox、React Material，我想将搜索栏和清除按钮对齐在同一行上，并且 space 彼此对齐。

请看这个link

 <div className={classes.searchBarSection}>
      <Paper component="form" className={classes.searchBar}>
        <InputBase
          className={classes.input}
          placeholder="Search..."
          inputProps={{ "aria-label": "search..." }}
        />
        <IconButton
          type="button"
          className={classes.iconButton}
          aria-label="search"
        >
          <SearchIcon />
        </IconButton>
      </Paper>
      <Button variant="contained" size="small" color="primary">
        Clear
      </Button>
    </div>

Answer 1

试试这个：

  searchBarSection: {
    display: "flex",
    justifyContent: "space-between",
    width: "300px"
  },

根据您想要的宽度 space 调整它们之间的宽度

这看起来像：

Answer 2

添加这些样式，宽度会给 searchBatSection 喘息的空间 space children。尝试使用 justifyContent 选项找到适合您的套装。

  searchBarSection: {
    width: "50%",
    display: "flex",
    justifyContent: "space-between"
  },

Answer 3

使用网格

  searchBarSection: {
    display: 'grid',
    gridTemplateColumns: '0.8fr 0.2fr',
    gap: '12px',
  },

https://codesandbox.io/s/material-demo-6w93i

对齐项目 Flexbox , React Material in React

Align Items Flexbox , React Material in React

css

flexbox

reactjs

material-design

react-material

使用网格