“Richten Sie ein Element mit Flexbox nach unten aus” Code-Antworten

Richten Sie ein Element mit Flexbox nach unten aus

<style>
.content {
  height: 200px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
}

button {
  margin-top: auto;
}
</style>

<div class="content">
  <h1>Hello World</h1>
  <button>Submit</button>	<!-- Aligned element -->
</div>
Mysterious Macaque

CSS Flex unten

You can use auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
Show code snippet

Alternatively, you can make the element before the a grow to fill the available space:

p { flex-grow: 1; } /* Grow to fill available space */
Santino

Ähnliche Antworten wie “Richten Sie ein Element mit Flexbox nach unten aus”

Fragen ähnlich wie “Richten Sie ein Element mit Flexbox nach unten aus”

Weitere verwandte Antworten zu “Richten Sie ein Element mit Flexbox nach unten aus” auf HTML

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen