Flex布局下React组件文本与按钮的左右对齐问题求助

核心问题在于你当前的WellContainer设置了flex-direction: column，导致内部的文本区域和按钮是垂直排列的，无法实现左右分布。以下是具体的修复方案：

1. 调整容器的flex布局方向 #

修改StyledWellContainer，将flex方向改为横向，并设置垂直居中对齐：

const StyledWellContainer = styled(WellContainer)`
  margin-right: 1rem;
  width: 100%;
  padding-bottom: 2px;
  padding-top: 0;
  flex-direction: row; /* 改为横向布局 */
  align-items: center; /* 元素垂直居中 */
`;

2. 让文本区域占据剩余空间 #

给FieldDetails添加flex-grow: 1，使其自动填充容器内除按钮外的所有空间，按钮会自然被挤到右侧：

const FieldDetails = styled.div`
  display: flex;
  flex-direction: column;
  border: none;
  flex-grow: 1; /* 占据剩余空间 */
`;

3. 简化按钮样式 #

删除DeleteButton中不必要的flex-basis设置，保留基础对齐样式即可：

const DeleteButton = styled(Button)`
  margin-right: 0;
  margin-left: auto;
  display: block;
`;

4. 调整分隔线样式（匹配原设计） #

原来的WellContainer给所有子元素加了底部边框，改成横向布局后，需要调整为文本区域右侧加分隔线，避免布局错乱：

const FieldDetails = styled.div`
  display: flex;
  flex-direction: column;
  border: none;
  flex-grow: 1;
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: ${({ theme }) => theme.color.border.light}; /* 添加右侧分隔线 */
`;

同时修改WellContainer的子元素样式，移除全局底部边框设置：

const WellContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: ${({ theme, borderType }) => (borderType === 'attention' ? theme.color.border.negative : theme.color.border.light)};
  border-radius: 12px;

  & > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
`;

修改后的组件结构无需调整，保持原样即可。这样就能实现文本居左、按钮居右的横向布局效果。

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