# Перестроение блоков через медиазапросы в CSS

Давайте научимся выполнять перестроения блоков на различной ширине экрана. Для примера реализуем вот такое поведение:

Для начала напишем HTML код наших блоков:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> </div>`

Теперь давайте напишем стили родителю наших блоков:

`.parent { display: flex; width: 90%; margin: 50px auto; border: 1px solid red; }`

Теперь напишем стили самим блокам, не указывая тех свойств, которые будут меняться медиазапросами:

`.child { box-sizing: border-box; padding: 20px; border: 1px solid green; }`

На большой ширине экрана пусть промежуток между блоками рассчитывается автоматически:

`@media (min-width: 500px) { .parent { justify-content: space-between; } }`

Поставим ширину нашим блокам чуть меньше `50%`, чтобы оставить мест под отступ:

`@media (min-width: 500px) { .child { width: 49.5%; } }`

На маленькой ширине экрана поставим наши блоки в колонку:

`@media (max-width: 500px) { .parent { flex-direction: column; } }`

Зададим им нижний отступ:

`@media (max-width: 500px) { .child { margin-bottom: 10px; } }`

Соберем все вместе и получим следующий код:

`.parent { display: flex; width: 90%; margin: 50px auto; } .child { box-sizing: border-box; padding: 20px; border: 1px solid green; } @media (max-width: 500px) { .parent { flex-direction: column; } .child { margin-bottom: 10px; } } @media (min-width: 500px) { .parent { justify-content: space-between; } .child { width: 49.5%; } }`

Повторите пример, приведенный ниже:

Повторите пример, приведенный ниже:

Повторите пример, приведенный ниже:

Повторите пример, приведенный ниже:

← →
↑