为什么 align-self: flex-end css 属性在 flex div 上不起作用？答案

【问题标题】：Why doesnt the align-self: flex-end css property doesnt work on flex div?为什么 align-self: flex-end css 属性在 flex div 上不起作用？
【发布时间】：2020-06-07 05:51:13
【问题描述】：

我想将单击我按钮对齐到包含它的 div 的左侧。

下面是我的代码，

render = () => {
    return (
        <Wrapper>
            <Body>
                <span>Title</span>
                <Description/>
                <ChildComponent/>
            </Body>
            <Actions>
                {((condition1 && !condition2) || !condition1) && (
                    <ActionText>
                        Hide 
                    </ActionText>
                )}
                {condition1 ? (
                    condition2 ? (
                        <ButtonLink href="dddd">Click me</ButtonLink> // i want this                              //to be displayed at the extreme right of Actions div
                    ) : (<ButtonLink href="ee">Add</ButtonLink>)
                ) : null}
            </Actions>
        </Wrapper>
    }

const Wrapper = styled.div`
    position: fixed;
    overflow: auto;
    display: flex;
    flex-direction: column;
`;

 const Body = styled.div`
     display: flex;
     flex-direction: column;
 `;

  const Actions = styled.div`
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  `;

   const ButtonLink = styled.a`
       display: flex;
       justify-content: center;
       align-items: center;
   `;

我希望点击我按钮显示在 Actions div 的最右侧。我尝试使用 align-self: flex-end 到 ButtonLink 点击我，但它不起作用。

但是，将 margin-left 添加到 ButtonLink click me 会移动它。

我想使用 flex-end。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

标签： css reactjs

【解决方案1】：

align-self: flex-end; 只会垂直对齐某些东西（可以说是上下对齐）。没有视觉效果但尝试为您的操作提供flex-end

  const Actions = styled.div`
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
  `;

【讨论】：