Elemente mit Flexbox

In dem angegebenen Szenario haben Sie einen Div -Behälter mit verschiedenen untergeordneten Elementen. Sie wollen ein Layout erreichen, bei dem die Elemente vertikal stapeln, wobei die Schaltfläche immer unten positioniert ist, unabhängig von der Höhe des Textes.

Flexbox bietet eine Lösung für dieses Problem durch automatische Margen. Automargen ermöglichen die Verteilung des verbleibenden Raums an Elemente mit Automargen vor der Ausrichtung. Eine Möglichkeit, das gewünschte Layout zu erreichen, besteht darin, die folgenden CSS zu verwenden:

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

Alternativ können Sie ein Flex -Layout wie folgt verwenden:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

  
heading 1
  
heading 2
  
Some text more or less
  Click me

Dieser Ansatz stellt sicher, dass die Textelemente erweitert werden, um die verfügbare Höhe zu füllen, während die Schaltfläche auf den Boden des Containers gedrückt wird.