align-self：flex-end不将项目移动到底部

Question

正如您在此处所见：JSFiddle

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加到.author

margin-top: auto;

您还需要删除flex-end。

Answer 2

你可以在div之间创建一个包装div，它必须从flex start开始浮动。并且作者在包装器之外并且提供给.item justify-content: space-between;。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。