freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ad367417b2b2512afb	Use the flex-shrink Property to Shrink Items	0		Utilice la propiedad flex-shrink para reducir artículos

Description

Hasta ahora, todas las propiedades de los desafíos se aplican al contenedor de flexión (el elemento principal de los elementos de flexión). Sin embargo, hay varias propiedades útiles para los elementos flexibles. La primera es la propiedad de flex-shrink . Cuando se usa, permite que un elemento se encoja si el contenedor flexible es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flexibles dentro de él. La propiedad flex-shrink toma números como valores. Cuanto mayor sea el número, más se reducirá en comparación con los otros elementos del contenedor. Por ejemplo, si un elemento tiene un valor de flex-shrink de 1 y el otro tiene un valor de flex-shrink de 3, el que tiene el valor de 3 se contraerá tres veces más que el otro.

Instructions

Agregue la propiedad CSS flex-shrink a #box-1 y #box-2 . Dé a #box-1 un valor de 1 y #box-2 un valor de 2.

Tests

tests:
  - text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 1.'
    testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
  - text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 2.'
    testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'

Challenge Seed

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;

  }

  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;

  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Solution

// solution required

2.5 KiB Raw Blame History