2.8 KiB
2.8 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ad367417b2b2512afa | Use the flex-wrap Property to Wrap a Row or Column | 0 | Utilice la propiedad flex-wrap para envolver una fila o columna |
Description
flex-wrap
, le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor. CSS también tiene opciones para la dirección de la envoltura: -
nowrap
: esta es la configuración predeterminada y no envuelve los elementos. -
wrap
: envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna. -
wrap-reverse
: envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna.
Instructions
flex-wrap
al elemento #box-container
y asígnele un valor de wrap. Tests
tests:
- text: 'El elemento <code>#box-container</code> debería tener la propiedad <code>flex-wrap</code> establecida en un valor de wrap.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
Challenge Seed
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
Solution
// solution required