- Teoría
- Teoría
Alineamos un elemento en vertical
Ya definimos el ancho y los márgenes de las columnas del pie. Solo falta alinear verticalmente el contenido de la segunda columna. Según el diseño, debe quedar pegado a la parte inferior:
De forma predeterminada, los elementos flex se estiran hasta tener la misma altura que el elemento más alto de la fila. El resaltado de las cajas permite verlo con claridad:
La forma más sencilla de llevar un elemento al borde inferior es agregarle un margen superior automático. El elemento flex reduce su altura a la de su contenido y queda pegado a la parte inferior de su contenedor padre.
Dentro de una caja de bloque, los márgenes automáticos superior e inferior se comportan como si valieran 0. En un contenedor flex, en cambio, permiten mover un elemento hasta el borde superior o inferior. Si ambos márgenes son automáticos, incluso podemos centrarlo en vertical.
Queremos llevar el contenido de la segunda columna al borde inferior, así que le agregaremos un margen superior automático.
Después quitaremos el resaltado de las cajas, que ya no necesitamos.
También se puede usar align-self para alinear un elemento flex en la dirección perpendicular al eje principal.
En esta página creamos las columnas con flexbox, pero solo vimos algunas de sus posibilidades. Encontrarás más información en «Introducción a flexbox» y «Flexbox en profundidad».
En este capítulo aprendimos a organizar las cajas principales de una página. La próxima vez nos ocuparemos de elementos más pequeños.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Agrega un margen superior automático a la clase
copyright. El texto de derechos de autor quedará alineado abajo, respetando el relleno del contenedor. - En la línea 6 de
index.html, elimina el enlace al archivoportfolio-outline.css.