React实现双行文本左右分栏布局的问题求助

问题描述 #

我希望在React组件中，将“API Name”和“Resource Name”两行文本放在左侧，“Service Name”和“Status”两行文本放在右侧，实现左右分栏的布局，但当前代码的结果不符合预期。作为HTML和React新手，请问该如何正确格式化这四个元素？

当前代码：

const ViewHeader = (props: ViewHeaderProps) => {
  const {apiName, resourceName, serviceName, apiStatus, desc, rpcName, verb, uri} = props;
  return (
    <div className="view-api-header">
      <span>
        <div>{apiName}</div>
        <div>{serviceName}</div>
      </span>
      <span>
        <div>{resourceName}</div>
        <div>{apiStatus}</div>
      </span>
      <div>
        <span>{apiName}</span>
        <span>{serviceName}</span>
      </div>
      <div>
        <span>{resourceName}</span>
        <span>{apiStatus}</span>
      </div>
    </div>
  );
};

解决方案 #

调整思路 #

用Flexbox布局实现左右分栏，将左侧的两个文本（API Name、Resource Name）和右侧的两个文本（Service Name、Status）分别放入独立容器，确保内部文本垂直排列。

修正后的React组件代码 #

const ViewHeader = (props: ViewHeaderProps) => {
  const { apiName, resourceName, serviceName, apiStatus } = props;
  return (
    <div className="view-api-header">
      {/* 左侧容器：垂直排列API Name和Resource Name */}
      <div className="header-left">
        <div>{apiName}</div>
        <div>{resourceName}</div>
      </div>
      {/* 右侧容器：垂直排列Service Name和Status */}
      <div className="header-right">
        <div>{serviceName}</div>
        <div>{apiStatus}</div>
      </div>
    </div>
  );
};

配套CSS样式 #

.view-api-header {
  /* 启用flex布局，让子元素左右分布 */
  display: flex;
  /* 左右两端对齐，中间自动留白 */
  justify-content: space-between;
  /* 可选：让左右容器在垂直方向居中对齐 */
  align-items: center;
  /* 可选：添加内边距避免文本贴边 */
  padding: 8px 16px;
}

.header-left, .header-right {
  /* 让容器内的文本垂直排列 */
  display: flex;
  flex-direction: column;
  /* 可选：调整两行文本的间距 */
  gap: 4px;
}

关键说明 #

• 删除原代码中重复冗余的元素，只保留核心的左右分栏容器
• display: flex 是实现左右布局的核心，justify-content: space-between 确保左右容器分别靠向两端
• 子容器用 flex-direction: column 实现内部文本的垂直排列
• 可通过 gap 或 margin 属性调整每行文本的间距，优化视觉效果

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