webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

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

Привет всем.
Я уже не знаю, никак не могу понять, откуда берется такой косяк во 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; }


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

Есть соображения?)
  • Вопрос задан
  • 959 просмотров
Решения вопроса 1
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Пригласить эксперта
Ваш ответ на вопрос

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

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