Tengo un div
con 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 la cantidad de texto que haya en la p
quiero que el .botón
quede siempre en la parte inferior sin sacarlo del flujo. He oído que esto se puede conseguir con Flexbox pero no consigo que funcione.
Puede utilizar márgenes automáticos
Antes de la alineación mediante
justify-content
yalign-self
, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.
Así que puede utilizar 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 */
-- begin snippet: js hide: true -->
.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>
Fin del fragmento;
Como alternativa, puede hacer que el elemento que precede a la "a" crezca para llenar el espacio disponible:
p { flex-grow: 1; } /* Grow to fill available space */
-- begin snippet: js hide: true -->
.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>
Fin del fragmento;
Puedes usar display: flex para posicionar un elemento hacia abajo, pero no creo que quieras usar flex en este caso, ya que afectará a todos tus elementos.
Para posicionar un elemento en la parte inferior usando flex prueba esto:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
Tu mejor opción es establecer position: absolute al botón y ponerlo en bottom: 0
, o puedes colocar el botón fuera del contenedor y usar transformación negativa: translateY(-100%)
para meterlo en el contenedor así:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Mira este [JSFiddle][1]
La solución con align-self: flex-end;
no me funcionó, pero ésta sí en caso de que quieras usar flex:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Nota:** Cuando "se ejecuta el fragmento de código" tiene que desplazarse hacia abajo para ver el enlace en la parte inferior.
begin snippet: js hide: false console: true babel: false -->
.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>
Fin del fragmento;