Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!DOCTYPE html> <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>
