Задать вопрос
@TheSkyLineForce
верстка

Имеется макет, который нужно реализовать с помощью Flexbox.Также есть некоторый CSS код. Что в нём нужно подправить?

5dfb87f0cda7d698813825.png

Нужно,чтобы получился такой мини макет,сверстан по FlexBox'у.
Я здесь плохо понимаю, но кажется должно быть 6 блоков, как средний блок в верхней части растянуть по вертикали?
Имеется код:
.container-1 , .container-2{
display: flex;
justify-content: center;
flex-direction: row;
align-items:flex-start;

}
.container-1 div , .container-2 div{
padding: 10px;
align-items: flex-start;
margin:10px;
width:100px;
background-color: darkblue;
border: 1px solid darkblue;
}
.box-1{
width:100px;
height: 100px;
text-align: center;
vertical-align: bottom;
}
.box-2{
width:100px;
height: 100px;
align-items: stretch;
text-align: center;
vertical-align: bottom;
}
.box-3{
width:100px;
height: 100px;
text-align: center;
vertical-align: bottom;
}
.box-4{
width:100px;
height: 100px;
text-align: center;
vertical-align: bottom;
}
.box-5{
width:100px;
height: 100px;
text-align: center;
vertical-align: bottom;
}
.box-6{
width:100px;
height: 100px;
text-align: center;
vertical-align: bottom;
}
Что здесь нужно добавить?
  • Вопрос задан
  • 920 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 2
Natalia_ai
@Natalia_ai
люблю вёрстку
Задать .box2 побольше высоту, например, не 100px как у всех остальных блоков, а 250px.
Или так: https://codepen.io/Natalia_ai_ivanova/pen/oNgZxjj

Смотрите описание здесь
Ответ написан
1 комментарий
1 комментарий
@TheSkyLineForce Автор вопроса
У меня получилось с помощью 9 блоков,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        .container-1 , .container-2 , .container-3{
            display:flex;
            flex-wrap: wrap;
            padding:10px;
            width: 500px;
            justify-content:flex-start;
        }
        .box-1, .box-3 {
            margin: 10px;
            width:100px;
            height: 100px;
            text-align: center;
            background-color: darkblue;
        }
        .box-4, .box-5, .box-6{
            display: none;
        }
        .box-7, .box-8, .box-9{
            width:100px;
            height: 100px;  
            margin: 10px;
            background-color: darkblue;
        }
        .box-2{
            width:100px;
            height:200px;
            margin:10px;
            background-color: darkblue;
        }
    </style>
</head>
<body>
  
    <div class="container-1">
        <div class="box-1"><h3></h3></div>
        <div class="box-2"><h3></h3></div>
        <div class="box-3"><h3></h3></div>
    </div>
    <div class="container-2">
        <div class="box-4"><h3></h3></div>
        <div class="box-5"><h3></h3></div>
        <div class="box-6"><h3></h3></div>
    </div>
    <div class="container-3">
            <div class="box-7"><h3></h3></div>
            <div class="box-8"><h3></h3></div>
            <div class="box-9"><h3></h3></div>
        </div>
</body>
</html>
Это подходит?
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
2500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы