如何实现文本居中均匀分布并在右侧同行放置按钮？

要实现span元素居中均匀分布、按钮同行靠右的效果，你可以通过调整flex布局的结构和属性来实现，具体步骤如下：

1. 优化HTML结构 #

将所有span元素包裹在独立容器中，和按钮区域分隔开，便于单独控制布局：

<div class="content">
  <div class="status">
    <div class="status-items">
      <span>content 1</span>
      <span>content 2</span>
      <span>content 3</span>
      <span>content 4</span>
    </div>
    <div class="actions">
      <button>Do something</button>
    </div>
  </div>
</div>

2. 调整CSS样式 #

通过flex属性分配空间，让span容器占据大部分区域实现均匀分布，按钮区域自动靠右：

.status {
  display: flex;
  align-items: center; /* 确保所有元素垂直居中 */
  padding-left: 20vw;
  padding-right: 20vw;
}

.status-items {
  flex: 1; /* 占据按钮区域之外的所有可用空间 */
  display: flex;
  justify-content: space-evenly; /* 让span元素均匀分布 */
}

/* 可选：给按钮区域添加左侧间距，避免和span挤在一起 */
.actions {
  margin-left: 1rem;
}

原理说明 #

• 外层.status作为flex容器，align-items:center保证内部元素垂直对齐；
• .status-items设置flex:1后，会自动填充.actions以外的所有空间，内部通过justify-content:space-evenly让span元素在该容器内均匀分布，从而实现整体居中的效果；
• .actions作为flex容器的子元素，会自然排列在右侧，达到靠右对齐的需求。

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