3.7 KiB
3.7 KiB
| id | title | challengeType | videoUrl | localeTitle |
|---|---|---|---|---|
| 587d78ad367417b2b2512af8 | Align Elements Using the align-items Property | 0 | Alinear elementos usando la propiedad align-items |
Description
align-items es similar a justify-content . Recuerde que la propiedad justify-content alinea elementos flexibles a lo largo del eje principal. Para las filas, el eje principal es una línea horizontal y para las columnas es una línea vertical. Los contenedores flexibles también tienen un eje transversal que es el opuesto al eje principal. Para las filas, el eje transversal es vertical y para las columnas, el eje transversal es horizontal. CSS ofrece la propiedad align-items para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le dice a CSS cómo empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, cómo empujar todos los elementos a la izquierda o derecha dentro del contenedor. Los diferentes valores disponibles para align-items de align-items incluyen: -
flex-start: alinea los elementos con el inicio del contenedor flexible. Para las filas, esto alinea los elementos con la parte superior del contenedor. Para las columnas, esto alinea los elementos a la izquierda del contenedor. -
flex-end: alinea los elementos con el extremo del contenedor flexible. Para las filas, esto alinea los elementos con la parte inferior del contenedor. Para las columnas, esto alinea los elementos a la derecha del contenedor. -
center: alinea los elementos al centro. Para las filas, esto alinea los elementos verticalmente (espacio igual por encima y por debajo de los elementos). Para las columnas, esto los alinea horizontalmente (espacio igual a la izquierda y derecha de los elementos). -
stretch: estira los elementos hasta llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran hasta llenar el contenedor flexible de arriba a abajo. -
baseline: alinea los elementos a sus líneas de base. La línea de base es un concepto de texto, piénselo como la línea en la que se encuentran las letras.
Instructions
align-items al align-items #box-container y asígnele un valor de center. Prima Pruebe las otras opciones para la propiedad
align-items en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de center es el único que pasará este desafío. Tests
tests:
- text: 'El elemento <code>#box-container</code> debe tener una propiedad <code>align-items</code> establecida en un valor de center.'
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
Challenge Seed
<style>
#box-container {
background: gray;
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 200px;
font-size: 24px;
}
#box-2 {
background-color: orangered;
width: 200px;
font-size: 18px;
}
</style>
<div id="box-container">
<div id="box-1"><p>Hello</p></div>
<div id="box-2"><p>Goodbye</p></div>
</div>
Solution
// solution required