align-self

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 inicial	`auto`
Applies to	flex items, grid items, and absolutely-positioned boxes
Heredable	no
Valor calculado	`auto` 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 type	discrete

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

BCD tables only load in the browser

Véase también

Usando las cajas flexibles CSS