La propiedad align-items se usa para establecer la alineación de los elementos dentro del contenedor flexible o en la ventana dada. Alinea los elementos flexibles a lo largo del eje. La propiedad align-self se usa para anular la propiedad align-items.
Sintaxis:
align-items: stretch|center|flex-start|flex-end|baseline|initial| inherit;
Valor por defecto
- tramo
El valor de la propiedad:
estirar: los elementos se estiran para ajustarse al contenedor y es el valor predeterminado.
- Sintaxis:
align-items: stretch;
- Ejemplo:
javascript
<!DOCTYPE html><html><head><title>CSS | align-items Property</title><style>#stretch {width: 320px;height: 200px;border: 2px solid black;display: flex;align-items: stretch;}</style></head><body><center><h1 style="color:green;">GeeksforGeeks</h1><div id="stretch"><div style="background-color:Purple;">Purple</div><div style="background-color:Yellow;">Yellow</div></div></center></body></html> - Producción:
centro: la posición de los artículos debe ser el centro del contenedor verticalmente.
- Sintaxis:
align-items: center;
- Ejemplo:
javascript
<!DOCTYPE html><html><head><title>CSS | align-items Property</title><style>#center {width: 320px;height: 200px;border: 2px solid black;display: flex;align-items: center;}</style></head><body><center><h1 style="color:green;">GeeksforGeeks</h1><div id="center"><div style="background-color:Purple;">Purple</div><div style="background-color:Yellow;">Yellow</div></div></center></body></html> - Producción:
flex-start: los elementos se colocarán al principio del contenedor.
- Sintaxis:
align-items: flex-start;
- Ejemplo:
javascript
<!DOCTYPE html><html><head><title>CSS | align-items Property</title><style>#flex-start {width: 320px;height: 200px;border: 2px solid black;display: flex;align-items: flex-start;}</style></head><body><center><h1 style="color:green;">GeeksforGeeks</h1><div id="flex-start"><div style="background-color:Purple;">Purple</div><div style="background-color:Yellow;">Yellow</div></div></center></body></html> - Producción:
flex-end: los elementos se colocarán al final del contenedor.
- Sintaxis:
align-items: flex-end;
- Ejemplo:
javascript
<!DOCTYPE html><html><head><title>CSS | align-items Property</title><style>#flex-end {width: 320px;height: 200px;border: 2px solid black;display: flex;align-items: flex-end;}</style></head><body><center><h1 style="color:green;">GeeksforGeeks</h1><div id="flex-end"><div style="background-color:Purple;">Purple</div><div style="background-color:Yellow;">Yellow</div></div></center></body></html> - Producción:
línea base: los elementos se colocarán en la línea base del contenedor.
- Sintaxis:
align-items: baseline;
- Ejemplo:
javascript
<!DOCTYPE html><html><head><title>CSS | align-items Property</title><style>#baseline {width: 320px;height: 200px;border: 2px solid black;display: flex;align-items: baseline;}</style></head><body><center><h1 style="color:green;">GeeksforGeeks</h1><div id="baseline"><div style="background-color:Purple;">Purple</div><div style="background-color:Yellow;">Yellow</div></div></center></body></html> - Producción:
initial: Establece este valor/propiedad a su valor predeterminado.
- Sintaxis:
align-items: initial;
- Ejemplo:
javascript
<!DOCTYPE html><html><head><title>CSS | align-items Property</title><style>#initial {width: 320px;height: 200px;border: 2px solid black;display: flex;align-items: initial;}</style></head><body><center><h1 style="color:green;">GeeksforGeeks</h1><div id="initial"><div style="background-color:Purple;">Purple</div><div style="background-color:Yellow;">Yellow</div></div></center></body></html> - Producción:
heredar: hereda la propiedad del elemento principal.
Navegadores compatibles: los navegadores compatibles con la propiedad CSS align-items se enumeran a continuación:
- Google Chrome 21.0
- Internet Explorer 11.0
- Firefox 20.0
- ópera 12.1
- Safari 9.0, 7.0 -webkit-
Publicación traducida automáticamente
Artículo escrito por Shivansh2407 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA