align-self：flex-end不将项目移动到底部[重复]答案

【问题标题】：align-self: flex-end not moving item to bottom [duplicate]align-self：flex-end不将项目移动到底部[重复]
【发布时间】：2017-10-13 23:06:50
【问题描述】：

如你所见：JSFiddle

我希望作者 div 位于其父容器的底部。我尝试使用align-self: flex-end;，但它不起作用。我做错了什么？

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  display: flex;
  flex-direction: column;
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
}

.item .author {
  width: 100%;
  align-self: flex-end;
  border: 1px solid #000;
}

<div class="flexbox">

  <div class="item">
    <div class="title">
      Title
    </div>
    <div class="content">
      Content
    </div>
    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="title">
      Title
    </div>
    <div class="content">
      Content<br>Content
    </div>
    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="title">
      Title
    </div>
    <div class="content">
      Content<br>Content<br>Content
    </div>
    <div class="author">
      Author
    </div>
  </div>

</div>

【问题讨论】：

align-self 属性沿交叉轴移动弹性项目。在列方向容器中，横轴是水平的。这就是为什么align-self: flex-end 在您的布局中不起作用的原因：它向左/向右移动项目，而不是顶部/底部。

标签： html css flexbox

【解决方案1】：

尝试添加到 .author

margin-top: auto;

你还需要移除 flex-end。

【讨论】：

好的，但是如果我把 width:50% 放在右边，为什么？
移除 align-self: flex-end;
谢谢，为什么我必须这样做，为什么使用 flex-end 不起作用？
您切换了轴（垂直和水平）。这意味着自对齐现在在水平线上工作；要完成这项工作，您可以使用justify-content: space-between;，但在此之前您应该将所有元素（不包括作者）包装到包装器中。

【解决方案2】：

您可以围绕必须从 flex 开始浮动的 div 创建一个包装 div。以及作者外包装并给.itemjustify-content: space-between;。

https://jsfiddle.net/0zq5a5xu/2/

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.author {
  width: 100%;
  border: 1px solid #000;
}

<div class="flexbox">

  <div class="item">
    <div class="wrapper">
      <div class="title">
        Title
      </div>
      <div class="content">
        Content
      </div>
    </div>

    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="wrapper">
      <div class="title">
        Title
      </div>
      <div class="content">
        Content<br>Content
      </div>
    </div>
    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="wrapper">
      <div class="title">
        Title
      </div>
      <div class="content">
        Content<br>Content<br>Content
      </div>
    </div>
    <div class="author">
      Author
    </div>
  </div>


</div>

希望这会有所帮助。

【讨论】：