CSS Flex :: 2 Коробки [закрыто]

На чтение 3 мин Опубликовано 06.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Объяснение кода:

Вопрос или проблема

Хорошо, я не очень разбираюсь в CSS: особенно в адаптивном. Итак, вот что у меня есть. У меня есть контейнер (div), в котором находятся два дочерних aside (div). У первого ширина 75%, а у второго 25%. Проблем с настольными и мобильными устройствами (особенно телефонами) в альбомной ориентации, конечно, нет. Проблема возникает у телефонов в портретной ориентации. Второй div появляется под первым div. Хорошо. Но он имеет ширину 25%. Плохо. Используя flex, я мог бы растянуть его до 100%. Но это происходит на всех устройствах (например, ПК), где второй div находится под первым div. Мне нужно, чтобы два блока отображались с боковыми размерами 75%-25% на устройствах с большими экранами и 100%-100% вертикально на других устройствах с меньшими экранами в портретной ориентации. Помогите, пожалуйста?

Ответ или решение

Для решения вашей задачи по созданию двух боксов с использованием CSS Flexbox, где на больших экранах первый бокс занимает 75% ширины, а второй — 25%, а на меньших экранах (например, мобильных устройствах в портретной ориентации) они располагаются один под другим с шириной 100%, вам необходимо использовать медиа-запросы.

Вот пример кода, который достигает желаемого результата:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Начальное направление: строчное (горизонтальное) */
        }

        .box1 {
            flex: 0 0 75%; /* Первому боксу присваиваем 75% ширины */
            background-color: lightblue;
            padding: 20px;
            box-sizing: border-box;
        }

        .box2 {
            flex: 0 0 25%; /* Второму боксу присваиваем 25% ширины */
            background-color: lightcoral;
            padding: 20px;
            box-sizing: border-box;
        }

        @media (max-width: 600px) { /* Медиа-запрос для экранов шириной до 600px */
            .container {
                flex-direction: column; /* Меняем направление на столбцовое (вертикальное) */
            }

            .box1, .box2 {
                flex: 0 0 100%; /* Оба бокса занимают 100% ширины */
            }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box1">Бокс 1 (75%)</div>
    <div class="box2">Бокс 2 (25%)</div>
</div>

</body>
</html>

Объяснение кода:

HTML структура: Мы создаем div с классом container, который содержит два бокса (box1 и box2).
Основные стили:
- Мы устанавливаем display: flex; для контейнера, чтобы воспользоваться Flexbox.
- Первый бокс (box1) занимает 75% ширины, а второй (box2) — 25%.
Медиа-запрос:
- Когда ширина экрана становится 600 пикселей или меньше, направление контейнера изменяется на вертикальное (flex-direction: column;), что позволяет боксам располагаться друг под другом.
- Оба бокса теперь занимают 100% ширины.

Таким образом, данный пример кода полностью решает вашу задачу и обеспечивает правильное отображение боксов в зависимости от размера экрана.