alinhando elementos à parte inferior usando o flexbox

no cenário fornecido, você tem um contêiner de div com vários elementos filhos. Você pretende obter um layout em que os elementos se empilham verticalmente, com o botão sempre posicionado na parte inferior, independentemente da altura do texto. As margens automáticas permitem a distribuição do espaço restante para elementos com margens automáticas antes do alinhamento. Uma maneira de alcançar o layout desejado é usar o seguinte CSS:

p {margin-bottom: auto; } / * Empurre os seguintes elementos para o fundo * / A {margin-top: Auto; } / * Empurre e segui os elementos para o fundo * /

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

. Conteúdo { Altura: 200px; borda: 1px sólido; exibição: flex; Direcção flexível: coluna; } H1, H2 { margem: 0; } A { Margin-top: Auto; }

.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