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 justify-content
alineaba 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
: estirar los elementos para llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran para llenar el contenedor flexible de arriba a abajo. -
baseline
: alinear 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 centro 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