Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
Артур Кудашев
@archi_kud
Frontend Developer
CSS
Flexbox
Как правильно расположить картинки?
Здравствуйте, делаю портфолио и не могу решить проблему. Есть макет:
Решил сделать с помощью Flexbox, но блок с маленьким изображением занимает всю свободную высоту.
Задавал фиксированную высоту, но это не помогло.
Вопрос задан
более трёх лет назад
66 просмотров
1
комментарий
Подписаться
1
Простой
1
комментарий
Facebook
Вконтакте
Twitter
Rustam Bainazarov
@SmthTo
Куратор тега CSS
Или grid, или делать структурные повторяющиеся блоки-обертки на flex в рамках одного родителя, или пользоваться Masonry JS.
Без кода разговор не будет получаться.
Написано
более трёх лет назад
Решения вопроса
1
tyzberd
@tyzberd
флексами так не будет.
Используйте
https://masonry.desandro.com/
или что то подобное
https://ruseller.com/lessons.php?rub=32&id=2197
или grid, там уже смотрите или устраивает поддержка
https://medium.com/@andybarefoot/a-masonry-style-l...
https://codepen.io/balazs_sziklai/pen/mOwoLg
хотя если это не часто будет менятся, то можно и флексами. Две вертикальные колонки, а в них div с двумя картинками, потом одна большая и одна меньше
Ответ написан
более трёх лет назад
1
комментарий
Нравится
1
комментарий
Facebook
Вконтакте
Twitter
Артур Кудашев
@archi_kud
Автор вопроса
tyzberd
про две колонки тоже подумал, но выбрал grid.
Написано
более трёх лет назад
Пригласить эксперта
Ответы на вопрос
1
Дмитрий Карпов
@dimonos33ru
Попробуй сделать направление не в ряд, а в колонки
flex-direction: column
Ответ написан
более трёх лет назад
2
комментария
Нравится
2
комментария
Facebook
Вконтакте
Twitter
Артур Кудашев
@archi_kud
Автор вопроса
Дмитрий Карпов
не помогло. Они выстроились в столб, один за другим
Написано
более трёх лет назад
Дмитрий Карпов
@dimonos33ru
Надо комбинировать направления флексов
Ссылка на код
Написано
более трёх лет назад
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
HTML
+3 ещё
Простой
Как правильно подключить шрифты в 1C-Битрикс и почему у меня не получается?
1 подписчик
вчера
138 просмотров
1
ответ
CSS
Простой
Как убрать фон в input после выбора?
1 подписчик
вчера
72 просмотра
0
ответов
HTML
+1 ещё
Простой
Как соединить кнопку и форму вместе?
1 подписчик
01 июл.
87 просмотров
1
ответ
JavaScript
+2 ещё
Простой
Как поменять свет линии при нажатии?
1 подписчик
30 июн.
146 просмотров
1
ответ
JavaScript
+1 ещё
Простой
Как создать скрипт удаления элемента HTML используя Tempermonkey?
1 подписчик
29 июн.
105 просмотров
1
ответ
JavaScript
+1 ещё
Простой
Как реализовать выдвигающийся из айтема блок(при нажатии на плюс)?
1 подписчик
29 июн.
87 просмотров
0
ответов
HTML
+1 ещё
Простой
Как выровнить в колонку фотки как на макете?
1 подписчик
28 июн.
93 просмотра
1
ответ
CSS
+1 ещё
Простой
Как сделать чтобы блок с border-dashed постепенно заполнялся border-solid?
2 подписчика
28 июн.
1127 просмотров
1
ответ
HTML
+1 ещё
Средний
Как выровнять текст и картинку внутри ссылки?
1 подписчик
26 июн.
134 просмотра
1
ответ
JavaScript
+2 ещё
Простой
Нужна помощь с i18n + переключателем языка на нативном JS и HTML?
1 подписчик
25 июн.
180 просмотров
0
ответов
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Старший Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 400 000 ₽
Front-End developer (JavaScript, jQuery)
Karma8
от 150 000 до 320 000 ₽
Fullstack Developer под Wordpress
Future Search
от 100 000 до 150 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама