对齐项目 Flexbox ，在 React 中反应材料

Posted 2023-02-22

【中文标题】对齐项目 Flexbox ，在 React 中反应材料

【英文标题】：Align Items Flexbox , React Material in React

【发布时间】：2020-10-03 18:42:41

【问题描述】：

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

请看这个链接

CLICK HERE

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

【问题讨论】：

您是指彼此周围或它们之间的空间吗？

【参考方案1】：

试试这个：

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

根据您想要的间距调整宽度

这看起来像：

【讨论】：

嗨！你又来了:)。你能在搜索栏和清除按钮上加空格吗？

这方面的空格是什么意思？

@Robert 添加了一张图片来向您展示我的样子

【参考方案2】：

添加这些样式，宽度将给 searchBatSection 喘息的空间来空间孩子。尝试使用 justifyContent 选项来找到适合您的西装。

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

【参考方案3】：

使用网格

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

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