Как работают flexы в bootstrap 4?

Question

[Orbb]

Приветствую!

Решил перейти на 4 бутстрап. И как положено при освоении нового - я не пойму как в нем работает флексбокс.

Что не понятно:
у родителя - div.row уже есть flex-wrap:wrap и display:flex; соответственно.
внутри лежат div.col-8, div.col-4, div.col-8;

Я представлял себе этот момент так: последний col-8 автоматом займет место под первым col-8, ну как при флоатах и flex-wrap.

Но этого не произошло. И если мне все понятно в случае с float'ом, то с флексбоксом, учитывая что код [вроде бы] правилен, мне не совсем ясно.

Высота зависит от контента или задана руками, если это имеет значение.

Спасибо за помощь!

Comments

[Danila]

Если вы говорите о том чтобы 3ья col-8 встала впритык к первой, то флексбокс такого не умеет, не умел и не будет уметь

Answer 1

[Алекс Глебов]

3 блок и на 3 бутстрапе не занял бы место под 1. Так же как и на flex-wrap.
Только если поигратся с флоатами, но геморно.
Вообще для этого есть js библиотеки типа Masonry
либо вот так https://jsfiddle.net/40oujjct/

Comments

[Orbb]

про masonry знаю, использовал на лендинге в галерее, но в конкретно моем сейчас случае - неоправданно. Всего 3 блока. Видимо, придется поиграться со стилями )

Answer 2

[Егор Живагин]

Примерно так:
flex-ряд занимает высоту самого большого блока в ряду.
flex-wrap переносит не помещающийся блок на новый ряд.

Флексы идеально подходят к ситуации, когда высота блоков внутри флекса одинаковая. Хотя, и в вашем случае можно поиграться - зафиксировать высоту и задать направление column . Но это не всегда оправданно)