freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d78ab367417b2b2512af0	Use display: flex to Position Two Boxes	0	https://scrimba.com/p/pVaDAv/cgz3QS7	301105	Используйте display: flex для позиционирования двух прямоугольников

Description

Задачи этого раздела призваны научить использовать CSS для "гибкого" позиционирования элементов. Вначале будет объяснена теорию. Затем нужно будет практически применить концепцию flexbox для оформления простого компонента твита. Применение CSS свойства display: flex; к элементу позволяет затем использовать другие свойства flex для создания отзывчивого дизайна страницы.

Instructions

Добавьте CSS свойство display элементу #box-container и установите его значение равным flex.

Tests

tests:
  - text: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.
    testString: assert($('#box-container').css('display') == '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

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

2.2 KiB Raw Blame History Unescape Escape