x
<html><head><style>* { box-sizing: border-box;}.flex-container { display: flex; flex-wrap: wrap; font-size: 30px; text-align: center;}.flex-item-left { background-color: #f1f1f1; padding: 10px; flex: 50%;}.flex-item-right { background-color: dodgerblue; padding: 10px; flex: 50%;}/* Адаптивный макет - делает макет с одним столбцом вместо макета с двумя столбцами */@media (max-width: 800px) { .flex-item-right, .flex-item-left { flex: 100%; }}</style></head><body><h1>Адаптивный Flexbox</h1><p>В этом примере мы меняем процент гибкости для создания разных макетов для разных размеров экрана.</p><p><b>Измените размер окна браузера, чтобы увидеть, что направление меняется, когда размер экрана составляет 800 пикселей в ширину или меньше.</b></p><div class="flex-container"> <div class="flex-item-left">1</div> <div class="flex-item-right">2</div></div></body></html>