对齐项目Flexbox，React中的React材质

Question

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

请参阅此链接

CLICK HERE

ServerAliveInterval=30

Answer 1

尝试一下：

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

调整宽度，以使它们之间有多少空间

这看起来像：

Answer 2

添加这些样式后，宽度将为searchBatSection呼吸空间分配儿童空间。尝试使用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