在 flex div CSS 中对齐文本和按钮答案

【问题标题】：aligning text and buttons in flex div CSS在 flex div CSS 中对齐文本和按钮
【发布时间】：2022-10-01 00:21:43
【问题描述】：

我正在尝试在display: flex div 中对齐左侧的文本和右侧的按钮控件。

<CustomFieldContainer>
  <StyledWellContainer>
    <FieldDetails key={id}>
      <H4 bold>{label}</H4>
      <StyledBody>({capitalizeFirst(type)}) {required && <StyledSpan>REQUIRED</StyledSpan>} </StyledBody>
    </FieldDetails>
    <DeleteAction {...props} />
  </StyledWellContainer>
</CustomFieldContainer>

这是我到目前为止所得到的。

下面是上述所有 reactjs 元素的 CSS。

const CustomFieldContainer = styled.div`
  display: flex;
  flex-direction: row;
`;


const FieldDetails = styled.div`
  display: flex;
  flex-direction: column;
  border: none;
`;

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

这使得

我想要实现的非常简单，如下所示

任何帮助都是巨大的，基本的想法是维护一个容器，让文本在左边，控件在右边。谢谢你。

更新：

const StyledWellContainer = styled(WellContainer)`
  margin-right: 1rem;
  width: 100%;
  padding-bottom: 2px;
  padding-top: 0;
`;


import styled from \'styled-components\';

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;

  & > * {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: ${({ theme, disableDivider }) => (disableDivider ? \'none\' : theme.color.border.light)};
  }
  & > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
`;

export default WellContainer;

StyledWellContainer 的样式是什么？
添加。 @亚当托马斯

标签： css reactjs

【解决方案1】：

StyledWellContainer 需要是弹性容器，而不是 CustomFieldContainer

const StyledWellContainer = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
`;

const FieldDetails = styled.div`
  display: flex;
  flex: 2;
  flex-direction: column;
  height: 100%;
  border: none;
`;

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

【讨论】：

我也更新了StyledWellContainer，请参阅上面的更多说明