Lijn een element uit aan de onderkant met flexbox

Ik heb een div met wat kinderen:

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

en ik wil de volgende layout:

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

Ongeacht hoeveel tekst er in de p staat wil ik de .button altijd onderaan plakken zonder hem uit de flow te halen. Ik'heb gehoord dat dit haalbaar is met Flexbox maar ik krijg het niet aan de praat.

supersize
Bewerkte vraag 20ste3 april 2017 в 7:31
Programmering
html css flexbox
23ste1 juni 2015 в 10:56
Nog geen meningen
Oplossing

U kunt gebruik maken van automatische marges

Voorafgaand aan uitlijning via justify-content en align-self, wordt alle positieve vrije ruimte verdeeld over de automarges in die dimensie.

U kunt dus een van deze (of beide) gebruiken:

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>

Als alternatief, kun je het element voor de a laten groeien om de beschikbare ruimte te vullen:

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>
Commentaren (8)

Je kunt display: flex gebruiken om een element naar de onderkant te positioneren, maar ik denk niet dat je flex in dit geval wilt gebruiken, omdat het al je elementen zal beïnvloeden.

Om een element naar de bodem te plaatsen met flex kun je het volgende proberen:

.container {
  display: flex;
}

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

Je kunt het beste position: absolute op de knop zetten en deze op bottom: 0, of je plaatst de knop buiten de container en gebruikt negatief transform: translateY(-100%) om het in de container te brengen zoals dit:

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

Bekijk dit [JSFiddle][1]

TylerH
Bewerkt antwoord 12de0 november 2018 в 3:43
Commentaren (3)

De oplossing met align-self: flex-end; werkte niet voor mij maar deze wel voor het geval je flex wilt gebruiken:

Resultaat

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

Code

Note: Wanneer "running the code snippet" you have to scroll down to see the link at the bottom.

.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>
Timo
Bewerkt antwoord 24ste0 juni 2019 в 5:21
Commentaren (6)