Почему последний flex-item не сохраняет ширину других flex-item'ов?

Question

[sadaffairs]

Код.
Попробуйте изменить ширину экрана — блоки внутри flex-контейнера подстраиваются под ширину и переносятся на следующий ряд. Проблема состоит в том, что блоки из последнего ряда flex-item'ов не сохраняют заданную ширину в 150 пикселей, растягиваясь таким образом, чтобы заполнить все пустое оставшееся пространство. Как сделать так, чтобы flex-item'ы из последнего ряда не занимали всё свободное место?

Comments

[Ярослав Иванов]

Почему 150 когда блоки по 165 ?

[sadaffairs]

В свойствах же прописаны width:150px; и flex-basis: 150px;

Answer 1

[Сергей delphinpro]

В определенных случаях - можно: codepen.io/anon/pen/mRvdeK
(Определенные случаи зависят от количества блоков-айтемов и ширины контейнера)

Comments

[sadaffairs]

На самом деле, очень здорово.

Но я как-то смутно понимаю, как работает добавленный вами код.

[sadaffairs]

Разобрался. Вопрос решён.

Answer 2

[Андрей Федоров]

Потому что вы позволили item'ам растягиваться - flex: 1 1 150px;
Замените на flex: 0 1 150px;

Comments

[sadaffairs]

В принципе, неплохой вариант. Только из-за длинного названия одного цвета сбивается высота, как её выравнять?

[Андрей Федоров]

Да? У меня ничего не сбивается... Добавьте

.c-palette__colour-name {
  max-width: 120px; /* 150px - 2x padding 15px */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[sadaffairs]

Спасибо.

Answer 3

[Денис Инешин]

Таково поведение flex-элементов по задумке авторов.

Вы можете контролировать их размеры в определенных пределах заданием приоритета и т.п. Но их ширину нельзя зафиксировать.

Comments

[sadaffairs]

И что же делать?

Переверстать на флоатах?

[Денис Инешин]

sadaffairs: обычно да. Но попробуйте использовать скрытые флоат блоки, которые будут выполнять роль заглушек в конце. Если их показывать только в нужных случаях с помощью media queires то это должно помочь)

[Денис Инешин]

sadaffairs: я имел в виду скрытые Flex-блоки

[sadaffairs]

Денис Инешин: Один товарищ тут предложил уже решение, основанное на flex-блоках через псевдоэлементы, сработало.

Answer 4

[ch-aqwer]

Flex элементам нельзя margin давать.

Comments

[sadaffairs]

Нет, можно, читайте спецификацию flexbox.

[ch-aqwer]

sadaffairs: насколько я знаю рекомендуется использовать только для выравнивания