align-self

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

Resumen

La propiedad CSS align-self alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de align-items. Si el límite transversal de alguno de los elementos está definido como auto, el valor de align-self es ignorado.

Valor inicialauto
Applies toflex items, grid items, and absolutely-positioned boxes
Heredableno
Valor calculadoauto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. Its behavior depends on the layout model, as described for justify-self. Otherwise the specified value.
Animation typediscrete

Véase Usando las cajas flexibles CSS para más propiedades e información.

Sintaxis

css
/* Valores clave */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* Valores globales */
align-self: inherit;
align-self: initial;
align-self: unset;

Valores

auto

Se calcula acorde al valor de align-items del padre, o al de stretch si el elemento no tiene padre.

flex-start

El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.

flex-end

El límite transversal final del elemento flexible es unido al borde transversal final de la línea.

center

Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.

baseline

Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.

stretch

Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.

Sintaxis formal

align-self = 
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? <self-position> |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

Especificaciones

Specification
CSS Box Alignment Module Level 3
# align-self-property
CSS Flexible Box Layout Module Level 1
# align-items-property

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
align-self
anchor-center
Experimental
Supported in Flex Layout
flex_context.baseline
first baseline
last baseline
safe and unsafe
start and end
flex_context.stretch
Supported in Grid Layout
Supported for absolutely-positioned boxes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también