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

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d78ab367417b2b2512af0	Use display: flex to Position Two Boxes	0		Use la pantalla: flexione para posicionar dos cajas

Description

Esta sección utiliza estilos de desafío alternativos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. Primero, un desafío explicará la teoría, luego un desafío práctico utilizando un componente de tweet simple aplicará el concepto flexbox. Colocación de la display: flex; propiedades CSS display: flex; en un elemento le permite usar otras propiedades de flexión para construir una página receptiva.

Instructions

Agregue la display propiedades CSS a #box-container y establezca su valor en flex.

Tests

tests:
  - text: '<code>#box-container</code> debería tener la propiedad de <code>display</code> establecida en un valor de flex.'
    testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'

Challenge Seed

<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>

Solution

// solution required