freeCodeCamp/curriculum/challenges/espanol/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78ab367417b2b2512af0	Utiliza display: flex para posicionar dos cajas	0	https://scrimba.com/p/pVaDAv/cgz3QS7	301105	use-display-flex-to-position-two-boxes

--description--

Esta sección utiliza estilos de desafío alternos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. En primer lugar, un desafío explicará la teoría, luego un desafío práctico utilizando un simple componente de tweet aplicará el concepto de flexbox.

Colocar la propiedad CSS display: flex; en un elemento te permite usar otras propiedades flex para construir una página responsiva.

--instructions--

Agrega la propiedad CSS display a #box-container y establece su valor como flex.

--hints--

#box-container debería tener la propiedad display establecida en un valor de flex.

assert($('#box-container').css('display') == 'flex');

--seed--

--seed-contents--

<style>
  #box-container {
    height: 500px;

  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

--solutions--

<style>
  #box-container {
    height: 500px;
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>