Flexbox: space-between ведет себя как space-around

295
22 февраля 2017, 22:18

В коде ничего лишнего:

.slider-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider {
  width: 580px;
}

Результат на прилагаемом скрине. Если применить flexbox к дочернему элементу — блоки растягиваются по ширине, игнорируя отступы и max-width: 580px.

Answer 1

Скорее всего, дело в том, что у .slider есть свойство margin: auto. С ним флексбокс-потомки ведут себя именно так:

.container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border: 1px solid red; 
} 
 
.child { 
  height: 100px; 
  border: 1px solid; 
  width: 250px; 
  margin: auto; 
}
<div class="container"> 
  <div class="child"></div> 
  <div class="child"></div> 
</div>

READ ALSO
CSS анимация изменяет положение элемента
CSS

CSS анимация изменяет положение элемента

У меня есть шестиугольник внутри окружности

 282
Проблемы с наследованием !important свойств в CSS
CSS

Проблемы с наследованием !important свойств в CSS

Праздно ковыряя CSS заметил странный момент

 197
Печать таблицы в FireFox
CSS

Печать таблицы в FireFox

Почему при распечатке таблицы в FireFox происходит не ровный разрыв строк таблицы, исчезает нижняя граница предшествующей строки и так же толщина...

 273
Перегрузка оператора [дубликат]
c++

Перегрузка оператора [дубликат]

На данный вопрос уже ответили:

 233