La propiedad align-self en el CSS ajusta la alineación de los elementos en la línea flexible actual que excede el valor de la propiedad align-items, y si la nota al pie de margin uno de los elementos en el eje perpendicular se establece en la autopropiedad, se ignora align-self.
Funciones align-self css
| Valor inicial | auto |
|---|---|
| Aplicado a | elementos flexibles. |
| Heredable | No |
| Móvil | No |
| Valor calculado | Como se especificó. |
Esta propiedad no se puede aplicar a cuadros de nivel de bloque o celdas de tabla.
/* palabras reservadas */ align-self: auto; align-self: normal; /* alineación espacial */ align-self: center; align-self: start; align-self: end; align-self: self-start; align-self: self-end; align-self: flex-start; align-self: flex-end; align-self: left; align-self: right; /* alineación de línea de base */ align-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch; /* control de desbordamiento de contenido */ align-self: safe center; align-self: unsafe center; /* valores globales */ align-self: inherit; align-self: initial; align-self: unset;
Ejemplos y aplicaciones en código
Observe cómo hemos determinado la posición del último elemento Código CSS: Las versiones anteriores de algunos navegadores (por ejemplo, Chrome, IE, Safari) admitían flexbox pero con el uso de una versión anterior ( La propiedad acepta los Hará que la propiedad se utilice Los objetos se alinearán uno al lado del otro comenzando desde el principio del eje secundario del contenedor flexible (es decir, desde la parte superior del elemento en la mayoría de los casos). Los objetos se alinearán uno al lado del otro comenzando desde el final del eje secundario del contenedor flexible (es decir, desde la parte inferior del elemento en la mayoría de los casos). Los objetos se alinearán uno al lado del otro comenzando en el centro del eje secundario del contenedor flexible. Si las dimensiones de los artículos dentro del contenedor en el eje secundario son menores que las dimensiones del contenedor, entonces las dimensiones de los artículos aumentarán igualmente pero respetando las restricciones impuestas por propiedades align-self en el siguiente ejemplo:< div >
< div > Elemento n. ° 1
< div > Elemento n. ° 2
< div > Elemento n. ° 3
div {
display: flex;
align-items: center;
height: 120px;
background-color: #f8f9fa;
border: 1px solid #eaecf0;
}
div > div {
height: 60px;
background-color: skyblue;
margin: 5px;
padding: 0.25em;
}
div:nth-child(3) {
align-self: flex-end;
background-color: salmon;
}Soporte de navegadores
Característica Chrome Firefox IE Ópera Safari Soporte básico 29,0 20,0 11 12,5 No soportado Empezar y terminar No soportado soportado No soportado No soportado ? Izquierda y derecha No soportado 52,0 No soportado No soportado ? Base 57,0 soportado No soportado 44,0 ? Primera línea de base y última línea de base No soportado 52,0 No soportado No soportado ? Estirarse 57,0 52,0 No soportado 44,0 ? -webkit-o -ms-).Características generales
align-self siguientes valores, tenga en cuenta que solo hemos explicado los valores no admitidos en algunos navegadores porque no funciona.auto
align-items para el elemento padre.flex-start
flex-end
center
stretch
max-height o max-width(o similares), por lo que las dimensiones de los artículos dentro el contenedor será igual a la dimensión del contenedor en el eje secundario.Estructura align-self css
align-self: auto | flex-start | flex-end | center | stretch;
Consulte también
align-content y align-items.position describe cómo se debe colocar el elemento en el documento.width, height que se encarga de configurar las dimensiones del elemento.
