我在我的React應用程序中使用flexbox，React材質，我想將searchbar和clear按鈕對齊在同一行上，并且彼此之間留有空間。

請看這個鏈接

點擊這里

<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>

試試這個:

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

根據您想要的間距調整寬度

這將看起來像:

添加這些樣式，寬度會給searchBatSection喘息的空間，讓孩子有空間。嘗試justifyContent選項，找到適合自己的衣服。

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

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