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.