html - propiedad - Alinear un elemento al fondo con flexbox
inline-flex (5)
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 cuánto texto hay en la
p
, quiero pegar el
.button
Siempre en la parte inferior sin sacarlo del flujo.
He oído que esto se puede lograr con Flexbox, pero no puedo hacer que funcione.
La solución con
align-self: flex-end;
no funcionó para mí, pero este sí lo hizo en caso de que quiera usar flex:
Resultado
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Código
Nota: Al "ejecutar el fragmento de código", debe desplazarse hacia abajo para ver el enlace en la parte inferior.
.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>
No estoy seguro acerca de flexbox, pero puede hacerlo usando la propiedad de posición.
establece la
position: relative
div
principal
position: relative
elemento
position: relative
y secundario que puede ser un
<p>
o
<h1>
etc. establece la
position: absolute
e
bottom: 0
.
Ejemplo:
index.html
<div class="parent">
<p>Child</p>
</div>
style.css
.parent {
background: gray;
width: 10%;
height: 100px;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
Prueba esto
.content {
display: flex;
flex-direction: column;
height: 250px;
width: 200px;
border: solid;
word-wrap: break-word;
}
.content h1 , .content h2 {
margin-bottom: 0px;
}
.content p {
flex: 1;
}
<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>
Puede usar display: flex para colocar un elemento en la parte inferior, pero no creo que quiera usar flex en este caso, ya que afectará a todos sus 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 para el botón y establecerla en la
bottom: 0
, o puede colocar el botón fuera del contenedor y usar la
transform: translateY(-100%)
negativa
transform: translateY(-100%)
para llevarlo al contenedor de esta manera:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Comprueba este JSFiddle
Puedes usar márgenes automáticos
Antes de la alineación a través de
justify-contentyalign-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.
Entonces puede 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 */
.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>
Alternativamente, puede hacer que el elemento antes del
a
crezca para llenar el espacio disponible:
p { flex-grow: 1; } /* Grow to fill available space */
.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>