web-dev-qa-db-fra.com

align-self: flex-end ne déplace pas l'élément vers le bas

Comme vous pouvez le voir ici: JSFiddle

Je veux que l'auteur div soit au fond de son conteneur parent. J'ai essayé avec align-self: flex-end; mais ça ne marche pas. Qu'est-ce que je fais 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>
htmlcsscss3flexbox
24
user2490424

Essayez d'ajouter à .author

margin-top: auto;

Vous devez également supprimer flex-end.

38
Alex

Vous pouvez faire un div wrapper autour des divs qui doivent flotter depuis le début flexible. Et l'auteur en dehors de l'emballage et donne à .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>

J'espère que cela t'aides.

6
webta.st.ic