Anulación de la alineación de flex items con align-self
Anule align-items del contenedor para elementos flex individuales mediante align-self.
Anulación de la alineación de flex items con align-self es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es align-self?
align-self reemplaza la configuración align-items del contenedor flex para un elemento flex específico. Se aplica a elementos individuales, no al contenedor.
Valores de align-self
Acepta los mismos valores que align-items:
auto— hereda align-items del contenedor (valor predeterminado)flex-start— alinea con el inicio del eje transversalflex-end— alinea con el final del eje transversalcenter— centra en el eje transversalstretch— se estira para ocupar todo el tamaño transversalbaseline— alinea las líneas base del texto
Ejemplo práctico
Una navegación en la que la mayoría de los elementos están centrados, pero el último botón se alinea con el final:
<nav class="nav">
<span>Logo</span>
<a href="#">Link</a>
<button class="cta-button">Sign Up</button>
</nav>
Estirar un solo elemento
Haga que una tarjeta se estire hasta ocupar toda la altura mientras las demás se ajustan a su contenido:
<div class="sidebar-layout">
<div>Content</div>
<div class="ad-unit">Ad</div>
</div>
margin: auto como alineación
Los márgenes automáticos de los elementos flex los empujan a ellos mismos, o a sus elementos hermanos, hacia el lado opuesto. Es una alternativa eficaz a align-self para centrar o distribuir el espacio.
<nav class="nav">
<span class="logo">Logo</span>
<a href="#">Home</a>
<a href="#">About</a>
<span class="settings">⚙</span>
</nav>
Centrado vertical con margin: auto
Los márgenes automáticos también funcionan verticalmente. margin-top: auto dentro de un contenedor flex en columna empuja un elemento hacia la parte inferior:
<div class="card">
<p>Card body</p>
<div class="card-footer">Footer</div>
</div>
Alineación de la línea base
Alinear los elementos según la línea base del texto mantiene relaciones legibles entre elementos de distintos tamaños:
<div class="stats-row">
<span class="big-number">42</span>
<span class="label">users</span>
</div>
align-self: auto (valor predeterminado)
align-self: auto indica al elemento que utilice el valor de align-items del contenedor. Solo necesita establecer align-self cuando quiera apartarse del valor predeterminado del contenedor.
Eje transversal frente a eje principal
Recuerde: align-self siempre opera sobre el eje transversal. Si flex-direction: column, el eje transversal es horizontal, por lo que align-self controla el posicionamiento izquierda/derecha.
Combinar align-self con flex-grow
Un patrón habitual: hacer crecer un elemento para que ocupe el espacio disponible Y reemplazar su alineación transversal:
<div class="features">
<div class="feature-card">Feature A</div>
<div>Feature B</div>
</div>
Alineación de Grid frente a Flexbox
CSS Grid tiene tanto align-self (eje de las filas) como justify-self (eje de las columnas) para el control 2D. align-self de Flexbox solo controla el eje transversal; use margin: auto para el eje principal.
Comprobación rápida
Un contenedor flex tiene align-items: center. Un elemento debe alinearse con la parte superior del eje transversal. ¿Qué propiedad debe establecer en ese elemento?
Repaso
align-self reemplaza align-items del contenedor flex para elementos individuales. Úselo para romper el patrón de alineación en elementos específicos. margin: auto es una herramienta complementaria que distribuye el espacio restante para empujar los elementos a lo largo de cualquiera de los dos ejes.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Anulación de la alineación de flex items con align-self» es gratis?
Sí — el texto completo de «Anulación de la alineación de flex items con align-self» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Anulación de la alineación de flex items con align-self»?
Anule align-items del contenedor para elementos flex individuales mediante align-self. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Anulación de la alineación de flex items con align-self»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Anulación de la alineación de flex items con align-self
- Propiedad order y reordenación visual
- Patrones abreviados de flex
- Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia