Alinear un elemento al fondo con flexbox

Tengo una divcon algunos niños:

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

y quiero el siguiente diseño:

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

Independientemente de cuánto texto haya en el, pquiero pegarlo .buttonsiempre en la parte inferior sin sacarlo del flujo. He oído que esto se puede lograr con Flexbox pero no puedo hacerlo funcionar.

Jun 23 '15 17:06 supersize

Puedes usar márgenes automáticos.

Antes de la alineación mediante justify-contenty align-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Entonces puedes usar uno de estos (o ambos):

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

Mostrar fragmento de código

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

Expand snippet

Alternativamente, puedes hacer que el elemento antes del acrecimiento llene el espacio disponible:

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

Mostrar fragmento de código

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

Expand snippet

Jun 23 '2015 15:06 Oriol

Puedes usar display: flex para colocar un elemento en la parte inferior, pero no creo que quieras usar flex en este caso, ya que afectará a todos tus elementos.

Para colocar un elemento en la parte inferior usando flex, intente esto:

.container {
  display: flex;
}

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

Su mejor opción es establecer la posición: absoluta en el botón y configurarlo en bottom: 0, o puede colocar el botón fuera del contenedor y usar negativo transform: translateY(-100%)para colocarlo en el contenedor de esta manera:

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

Mira este JSFiddle

Jun 23 '2015 12:06 Roumelis George

1. Estilo del elemento principal:style="display:flex; flex-direction:column; flex:1;"

2. Dale estilo al elemento que deseas que permanezca en la parte inferior:style="margin-top: auto;"

3. ¡Listo! Guau. Eso fue fácil.

Ejemplo:

ingrese la descripción de la imagen aquí

section {
  /* ONLY FOR DEMO, NOT NECESSARY */
  display: flex;
  flex-wrap: wrap;
}

div {
  /* PARENT ELEMENT */
  display: flex;
  flex-direction: column;
  flex: 1;
}

button {
  /* TARGET ELEMENT */
  margin-top: auto;
}

/* DECORATIVE STYLES FOR DEMO */

button {
  font-size: 20px;
  background-color: crimson;
  color: white;
  border-style: none;
  border-radius: 3px;
}

section {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  background-color: crimson;
}

div {
  font-size: 20px;
  background-color: khaki;
  border: 2px dashed black;
  margin: 10px;
  padding: 10px;
  min-width: 400px;
  min-height: 300px;
}

<section>
  <div>
    <span>Lorem ipsum dolor s at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span>
    <button>I</button>
  </div>
  <div>
    <span>Lorem ipsum dolor sit amet</span
    ><button>
      stay
    </button>
  </div>
  <div>
    <span
      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. quis mi diam. Quisque faucibus, massa non finibus iaculis, arcu nulla auctor enim, quis accumsan dolor odio quis turpis. Duis convallis pulvinar justo sit amet feugiat.
      Duis sed lectus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span
    >
    <button>
      at
    </button>
  </div>
  <div>
    <span>Lorem ipsum dolor sit amet</span
    ><button>
      bottom
    </button>
  </div>
  <div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span>
    <button>
      always
    </button>
  </div>
  <div>
    <span>Lorem ipsum dolor sit amet sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper</span
    ><button>
      all ways
    </button>
  </div>
</section>

Expandir fragmento

May 23 '2020 08:05 Ferit