Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribuciones complejas de componentes6/18
A la lista de tareas
  1. 1. Ancho y relleno de las tarjetas
  2. 2. Márgenes entre elementos flex
  3. 3. La propiedad align-items en flexbox
  4. 4. La dirección del eje principal
  5. 5. El orden visual con order
  6. 6. La propiedad align-self en flexbox
  7. 7. Márgenes y rellenos de los elementos flex
  8. 8. Prueba de una imagen más grande
  9. 9. Imágenes que se ajustan al contenedor
  10. 10. Una tarjeta con dos columnas
  11. 11. Una distribución asimétrica con tres columnas
  12. 12. Áreas de grid
  13. 13. Áreas que ocupan varias filas
  14. 14. Reglas de las áreas de grid
  15. 15. La propiedad align-self en grid
  16. 16. Ajustar el ancho de las columnas
  17. 17. La propiedad justify-self
  18. 18. Prueba de la tarjeta con más contenido
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La propiedad align-self en flexbox

Ya intercambiamos la imagen y el encabezado, pero aún queda trabajo. Fíjate en el encabezado: la línea verde es su borde inferior. Ocupa todo el ancho de la tarjeta porque el propio encabezado se estira. En el diseño, en cambio, está centrado y ocupa solo el espacio que necesita su contenido:

Lima

Lima

Un toque ácido y un aroma único.

+ Agregar
Diseño de las tarjetas

Por lo general, los elementos flex ajustan su ancho al contenido, pero eso no ocurrió en la tarjeta. La razón está en la dirección de los ejes. De manera predeterminada, los elementos flex pueden encogerse en el eje principal y se estiran en el transversal. Si el eje principal va de izquierda a derecha, pueden encogerse horizontalmente y se estiran verticalmente.

Esquema de los ejes de flexbox

Si el eje principal va de arriba hacia abajo, pueden encogerse verticalmente y se estiran horizontalmente.

Esquema de los ejes girados de flexbox

En las tarjetas, el eje principal va de arriba hacia abajo. Para que el encabezado ajuste su ancho al contenido y quede centrado, hay que alinearlo en el eje transversal. Ya conocemos align-items, que controla la alineación de todos los elementos flex, pero ahora solo queremos centrar el encabezado.

Usaremos align-self. Esta propiedad se aplica a un elemento flex y define su alineación en el eje transversal. Acepta los mismos valores que align-items: stretch, flex-start, flex-end y center.

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

Probemos align-self y después centremos el encabezado.

Si el eje principal va de arriba hacia abajo, se usa justify-content para alinear todos los elementos verticalmente.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="carousel-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Crea tu smoothie</title> </head> <body> <section class="carousel"> <h2>Crea tu smoothie</h2> <button class="arrow arrow-back" type="button"><span class="visually-hidden">Anterior</span></button> <ul class="cards-list"> <li class="card"> <h3 class="title">Mandarina</h3> <img class="image" src="img/mandarin.jpg" alt="Mandarina" width="120" height="120"> <p class="description">Sabor dulce e intenso con un toque ácido.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card current"> <h3 class="title">Lima</h3> <img class="image" src="img/lime.jpg" alt="Lima" width="150" height="150"> <p class="description">Un toque ácido y un aroma único.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card"> <h3 class="title">Fresa</h3> <img class="image" src="img/strawberry.jpg" alt="Fresa" width="120" height="120"> <p class="description">Suave aroma floral y sabor a verano.</p> <a class="add-link" href="#">+ Agregar</a> </li> </ul> <button class="arrow arrow-forward" type="button"><span class="visually-hidden">Siguiente</span></button> </section> </body> </html>
CSS
.cards-list { display: flex; align-items: center; margin: 0; padding: 0; } .card { display: flex; flex-direction: column; width: 120px; margin-right: 10px; padding: 15px; } .card:nth-child(3) { margin-right: 0; } .current { width: 150px; } .image { order: -1; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Crea una regla para la clase title y agrega align-self con el valor flex-start. Los encabezados dejarán de estirarse a todo el ancho de las tarjetas.
    2. Cambia el valor de align-self a flex-end. Los encabezados quedarán a la derecha.
    3. Ahora cámbialo a center. Los encabezados quedarán centrados.
    Codigo Heroe

    © 2023-2026, codigoheroe.com