x
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}/* Контейнер для флексбоксов */.row { display: flex; flex-wrap: wrap;}/* Создайте четыре равных столбца */.column { flex: 25%; padding: 20px;}/* На экранах шириной 992 пикселя или меньше переходите с четырех столбцов на два столбца */@media screen and (max-width: 992px) { .column { flex: 50%; }}/* На экранах шириной 600 пикселей или меньше расположите столбцы друг над другом, а не рядом */@media screen and (max-width: 600px) { .row { flex-direction: column; }}</style></head><body><h2>Адаптивный четырехколоночный макет с Flex</h2><p><strong>Измените размер окна браузера, чтобы увидеть эффект реагирования.</strong> На экранах шириной 992 пикселя или меньше размер столбцов изменится с четырех до двух. На экранах шириной 600 пикселей или меньше столбцы будут располагаться друг над другом, а не рядом друг с другом.</p><div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Столбец 1</h2> <p>Снова бессмысленный текст..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Столбец 2</h2> <p>Еще немного бессмысленного текста..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Столбец 3</h2> <p>Сам не пойму, зачем это читаю..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Столбец 4</h2> <p>Уже просто надоело это читать..</p> </div></div></body></html>