web-dev-qa-db-fra.com

Aligner un élément en bas avec flexbox

J'ai un div avec des enfants:

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

et je veux la mise en page suivante:

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

Peu importe la quantité de texte dans la p je veux coller le .button toujours au bas sans le sortir du flux. J'ai entendu dire que cela pouvait être réalisé avec Flexbox, mais je n'arrive pas à le faire fonctionner.

htmlcssflexbox
295
supersize

Vous pouvez utiliser marges automatiques

Avant l'alignement via justify-content et align-self , tout espace libre positif est distribué aux marges automatiques de cette dimension.

Vous pouvez donc utiliser l'un de ces éléments (ou les deux)

_p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
_
_.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}_
_<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>_

Sinon, vous pouvez agrandir l'élément avant la a pour qu'il remplisse l'espace disponible:

_p { flex-grow: 1; } /* Grow to fill available space */
_
_.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  flex-grow: 1;
}_
_<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>_
497
Oriol

Vous pouvez utiliser display: flex pour positionner un élément vers le bas, mais je ne pense pas que vous souhaitiez utiliser flex dans ce cas, car cela affecterait tous vos éléments.

Pour positionner un élément vers le bas avec flex, essayez ceci:

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

Votre meilleur choix est de définir position: absolu sur le bouton et de le définir sur bottom: 0, ou vous pouvez placer le bouton en dehors du conteneur et utiliser négatif transform: translateY(-100%) pour le placer dans le conteneur de la manière suivante:

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

Vérifiez ceci JSFiddle

122
Roumelis George

La solution avec align-self: flex-end; ne fonctionnait pas pour moi, mais celle-ci le faisait si vous voulez utiliser flex:

Résultat

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

Code

Remarque: Lorsque vous "exécutez l'extrait de code", vous devez faire défiler l'écran pour voir le lien en bas. 

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
}

.content .upper {
  justify-content: normal;
}

/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
  border: 1px solid #ccc;
}
<div class="content">
  <div class="upper">
          <h1>heading 1</h1>
          <h2>heading 2</h2>
          <p>paragraph text</p>
  </div>

  <div class="bottom">
          <a href="/" class="button">link button</a>
  </div>
</div>
64
Timo