klitorchuks
@klitorchuks
начинающий верстальщик

Как с помощью flex сделать как на картинке?

631dad3d5b3aa279498416.jpeg
  • Вопрос задан
  • 147 просмотров
Решения вопроса 1
nazares
@nazares
Software Engineer
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@Vadich
Html coder, front-end
общий флекс контейнер для 3ёх колонок
у третей колонки вложенный флекс контейнер
.container {
display: flex;
flex-direction: row;
}
для третей колонки
.col-3 {
display: flex;
}
Ответ написан
Комментировать
noder_ss
@noder_ss
Человек хороший, вёрстка по душе
Если интересует именно флекс, а не гридон, то как то так:
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <div class="photos-div">
<img src="img.jpg" alt="" width="260" height="500">
<img src="img2.jpg" alt="" width="400" height="500">
<div style="display: flex; flex-direction: column; ">
<img src="img3.jpg" alt="" height="244" width="260">
<img src="img4.jpg" alt=""height="244" width="260"></div>
    </div>

</body>
</html>

*{
    padding: 0;
    margin: 0;
}
.photos-div{
    display: flex;
    flex-direction: row;

}
.photos-div img{
    margin: 6px;
    object-fit: cover;
}

631e281de4390112323296.jpeg
Ответ написан
Комментировать
mizutsune
@mizutsune
Frontend Developer
1. Первые два изображения - это независимые блоки и поэтому вставляем их в контейнер без оборачивания в группу.
2. Оставшиеся два изображения - которые находятся в вертикальной колонне, оборачиваем в группу чтобы в дальнейшем было проще изменять стили и раскладку, например при адаптиве.

Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы