React应用头部组件：如何让三个元素间保持均等间距？

你的header容器已经设置了display: flex，可以通过调整flex布局属性给三个元素添加均等间距，下面提供两种常用方案：

方案一：两端对齐，中间自动分配间距 #

适合希望"Welcome XYZ"靠左、"Log Out"按钮靠右，中间元素自动填充间距的场景。修改getStyles中的root样式，添加justify-content: space-between和align-items: center（让元素垂直居中，适配header的高度）：

export const getStyles = (props: IAppHeaderStyleProps): IAppHeaderStyles => {
  const { className, theme } = props;

  return {
    root: [
      {
        backgroundColor: theme.palette.themePrimary,
        height: 54,
        maxWidth: "100%",
        margin: '0 auto',
        borderBottom: '1px solid transparent',
        boxSizing: 'border-box',
        display: 'flex',
        // 添加以下样式
        justifyContent: 'space-between',
        alignItems: 'center',
        // 可选：添加左右内边距，避免元素贴边
        padding: '0 16px'
      },
      className
    ]
  };
};

方案二：固定元素间均等间距 #

希望三个元素之间保持固定且一致的间距时，使用gap属性（flex布局原生支持），同样搭配align-items: center：

export const getStyles = (props: IAppHeaderStyleProps): IAppHeaderStyles => {
  const { className, theme } = props;

  return {
    root: [
      {
        backgroundColor: theme.palette.themePrimary,
        height: 54,
        maxWidth: "100%",
        margin: '0 auto',
        borderBottom: '1px solid transparent',
        boxSizing: 'border-box',
        display: 'flex',
        // 添加以下样式
        gap: '16px', // 可根据需求调整间距大小，比如20px
        alignItems: 'center',
        // 可选：添加左右内边距
        padding: '0 16px'
      },
      className
    ]
  };
};

补充说明 #

• 如果需要元素在容器中完全均匀分布（包括两端也有间距），可以把方案一的justify-content: space-between换成justify-content: space-around。
• align-items: center是为了让元素在54px高度的header中垂直居中，提升视觉体验，建议保留。

内容的提问来源于stack exchange，提问作者user989988