freeCodeCamp

2.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ab367417b2b2512af0	Use display: flex to Position Two Boxes	0		Используйте display: flex для позиционирования двух прямоугольников

Description

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

Instructions

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

Tests

tests:
  - text: 'Для элемента <code>#box-container</code> должно быть задано свойство <code>display</code> со значением 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

2.1 KiB Raw Blame History Unescape Escape