html - content - flex align right

align-self: flex-end no mueve el elemento a la parte inferior

Question

Esta pregunta ya tiene una respuesta aquí:

• Alinear el elemento div al fondo del contenedor [duplicar] 1 respuesta
• En CSS Flexbox, ¿por qué no hay propiedades de "elementos de justificación" y "auto-justificación"? 4 respuestas
• ¿Cómo funciona flex-wrap con align-self, align-items y align-content? 2 respuestas

Como puedes ver aquí: JSFiddle

Quiero que el div autor esté en el fondo de su contenedor principal. Lo intenté con align-self: flex-end; pero no está funcionando ¿Qué estoy haciendo mal?

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

Answer 1

Intente agregar a .author

margin-top: auto;

También es necesario eliminar el extremo flexible.

Answer 2

Puedes hacer un div envoltorio alrededor de los divs que tienen que flotar desde el inicio flexible. Y el autor fuera del envoltorio y le dará a .item justify-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>

Espero que esto ayude.