Как Flex элементы выровнять по вертикали?

@skapunker · Регистрация: 13.12.2013

Студворк — интернет-сервис помощи студентам

Всем привет! Подскажите, как выровнять все это вверх, независимо от того какая высота у левого блока, чтобы те блоки которые снизу сдвинулись вверх.

Как Flex элементы выровнять по вертикали?

@skapunker · 16.08.2019, 14:02 **[ТС]**

чтобы заполнило путое пространство

@gogolik · 16.08.2019, 14:11

jsfiddle

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
  <div class="column">
    <img src="https://via.placeholder.com/450" alt="">
    <img src="https://via.placeholder.com/250" alt="">
    <img src="https://via.placeholder.com/650" alt="">
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/450" alt="">
    <img src="https://via.placeholder.com/750" alt="">
    <img src="https://via.placeholder.com/150" alt="">
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.container {
  display: flex;
}
.column {
  width: 50%;
  display: flex;
  flex-flow: column;
}
.column img {
  border: 2px solid #000; /* только для визуального разделения изображений */
}

@skapunker · 16.08.2019, 14:13 **[ТС]**

gogolik, Так не пойдет. В код вмешиваться нельзя.
У нас есть вот что

HTML5
1
2
3
4
5
6
7
<div class="flex-block">
<img ....>
<img ....>
<img ....>
<img ....>
<img ....>
</div>

@AlexZaw · 16.08.2019, 14:25

skapunker, либо использовать flex-direction: column; либо воспользоваться библиотекой masonry, либо использовать свойство column-count

@skapunker · 16.08.2019, 14:33 **[ТС]**

AlexZaw, column-count это чудо, я не знал что существует такая штука

Добавлено через 1 минуту
AlexZaw, а как сделать, чтобы у column-count нижние элементы ровненько снизу встали?

@AlexZaw · 16.08.2019, 14:39

Сообщение от skapunker

а как сделать, чтобы у column-count нижние элементы ровненько снизу встали?

Чудес, к сожалению не бывает

Тут уже либо картинки по размеру подбирать, либо родителю высоту задавать и делать overflow:hidden;, либо через js какую-то логику реализовывать.

Новые блоги и статьи Все статьи Все блоги /
AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,465

	Как Flex элементы выровнять по вертикали? 16.08.2019, 14:02. Показов 1799. Ответов 6 Метки css, flex (Все метки) Всем привет! Подскажите, как выровнять все это вверх, независимо от того какая высота у левого блока, чтобы те блоки которые снизу сдвинулись вверх. 0

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,465
	16.08.2019, 14:02 [ТС]
	чтобы заполнило путое пространство 0

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,095
	16.08.2019, 14:25
	Сообщение было отмечено skapunker как решение Решение skapunker, либо использовать `flex-direction: column;` либо воспользоваться библиотекой masonry, либо использовать свойство `column-count` 2

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,465
	16.08.2019, 14:33 [ТС]
	AlexZaw, column-count это чудо, я не знал что существует такая штука Добавлено через 1 минуту AlexZaw, а как сделать, чтобы у column-count нижние элементы ровненько снизу встали? 0

Как Flex элементы выровнять по вертикали?

Решение