Что происходит с flexbox (замучался думать)?

Question

[Сергей Горячев]

Привет всем.
Я уже не знаю, никак не могу понять, откуда берется такой косяк во flexbox.
https://jsfiddle.net/webirus/t8x2o7yy/3/

.header .wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
}

Красные блоки должны выравниваться от краев.
То есть, первый должен быть прям слева, второй по центру, третий в упор к правому краю.
Это у нас указано верно justify-content: space-between;
По сути получается, что space-between "превращается" в space-around.

Но не работает именно в таком написании.

Если я уберу clearfix из <div class="wrapper clearfix">, то всё работает хорошо.
Убрать не проблема, но что не так с clearfix'ом и как он "ломает" флекс?

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Обычная вроде конструкция, использую довольно давно её.
А вот с флексом первый раз обломала меня.

Есть соображения?)

Comments

[Bowen]

Обычно, clearfix используют тогда когда применяют float. В вашем случаем он не нужен.

Answer 1

[littleguga]

Вот тут разъяснение и фикс

Comments

[Сергей Горячев]

Левый край норм, правый также с отступом.

[littleguga]

Sergey Goryachev: можете рабочий вариант показать?

[Сергей Горячев]

littleguga: сорри, мой косяк. не дочитал мануал. table убил и всё норм. спасибо)

[Сергей Горячев]

littleguga: правда теперь clearfix не работает))) буду фикс писать для конкретных флексов

[littleguga]

Sergey Goryachev: не совсем понял, как Вы сделали в итоге. У меня норм становится, если display: none: поставить у after/before, вот пример: https://jsfiddle.net/t8x2o7yy/7/

[littleguga]

Sergey Goryachev: ну или если убрать content и display: table

[littleguga]

Sergey Goryachev: в принципе можно накатить фикс/костыль, проверяем, если браузер поддерживает flexbox, то для clearfix добавляем after/before display: none. Если не поддерживает, ничего не трогаем.

[Сергей Горячев]

littleguga: clearfix сыпется весь
https://jsfiddle.net/webirus/t8x2o7yy/8/

[Сергей Горячев]

По сути решается только убиранием clearfix у wrapper, но как показывает практика, он там очень нужен всегда и без него поедет что-то еще. Поэтому ищу решение вот.

[littleguga]

Sergey Goryachev: так я и говорю, что либо флексы, либо clearfix.

[littleguga]

Sergey Goryachev: зачем? Если у Вас браузер поддерживает flex, то убирайте clearfix и всё. Везде в остальных местах будут флексы и всё ок

[Сергей Горячев]

littleguga: ну, должно же быть решение))) живем в такой интересный век) как-то подружить хочется) если уж не получится, буду делать по уму)))))))

[littleguga]

Sergey Goryachev: как раз решения быть не должно, ибо текущее поведение - правильное. Делаете after и before - они начинают учитываться. Если они пустые и не отображаются, то их нет и браузер не пересчитывает ничего. Так что единственное решение - делать по уму)

[Сергей Горячев]

littleguga: ну, с первый блоком же получилось))))

[littleguga]

Sergey Goryachev: не получилось. after и before так и остались отображаться, просто оба перенеслись в правую часть, после этих 3 блоков. Посмотрите сами через инспектор