如果 flex 方向是 row，为啥 align-self 将我的框显示到底部而不是在 flex 端？ [复制]

Posted 2023-03-05

【中文标题】如果 flex 方向是 row，为啥 align-self 将我的框显示到底部而不是在 flex 端？ [复制]

【英文标题】：Why align-self is showing my box to bottom rather to be at flex end if the flex direction is row? [duplicate]如果 flex 方向是 row，为什么 align-self 将我的框显示到底部而不是在 flex 端？ [复制]

【发布时间】：2022-01-21 15:04:56

【问题描述】：

#container2 
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;


#one 
  height: 50%;
  width: 25%;
  background-color: coral;


#two 
  height: 50%;
  width: 25%;
  background-color: crimson;


#three 
  height: 50%;
  width: 25%;
  background-color: rgb(80, 30, 12);
  align-self: flex-end;

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

在上面的代码中，我在第三个 div 标签中使用了 flex 属性，当我使用 align self 将其对齐到底部时，我想将其移动到右下角

【参考方案1】：

如果您在第三个容器中删除 css flex 属性align-self: flex-end;那么它将起作用。你不需要。

然后，您将所有三个彼此相邻。要将最后一个块移动到右边缘，您可以按照@Johannes 的正确建议为第三个块分配margin-left: auto;。但我只是因为约翰内斯的回答才想到这个。因此为他 +1 ;-)

#container2
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

#one
    height:50%;
    width:25%;
    background-color: coral;

#two
    height:50%;
    width:25%;
    background-color:crimson;


#three
    height:50%;
    width:25%;
    background-color: rgb(80, 30, 12);  
    margin-left: auto;  

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

【参考方案2】：

将最后一个 flex 项移动到容器末尾的标准方法是对其应用 margin-left: auto;（或 margin-top: auto 用于垂直方向的 flex 容器）：

#container2 
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;


#one 
  height: 50%;
  width: 25%;
  background-color: coral;


#two 
  height: 50%;
  width: 25%;
  background-color: crimson;


#three 
  height: 50%;
  width: 25%;
  background-color: rgb(80, 30, 12);
  margin-left: auto;

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

【讨论】：

另见A complete guide to flexbox | align-self 帮助解释这里发生了什么。

@Johannes +1 来自我。