Из-за чего флекс колонки стали разными по размерам?

Question

[Raul Abdullin]

Делаю верстку на флексах, совсем начинающий, поэтому не совсем понимаю, из-за чего после того, как я вставил в разные блоки разные текста, размер колонок стал разным. Код здесь https://jsfiddle.net/raulvo/Lq32kd4c/

Comments

[Сергей delphinpro]

Потому что flex означает гибкий.
Указывайте параметры сжатия flex-shink, базовые размеры flex-basis. Ну и никто не отменял старые добрые width/min-/max-width.

[Raul Abdullin]

Сергей, а не могли бы пожалуйста написать более подробно, что укзаать, чтобы они стали одинаковой ширины? Мне завтра проект сдавать, а еще столько всего сделать надо, не думал, что столько подводных камней вылезет

[Сергей delphinpro]

raulvodov, ширины в процентах укажите. часто бывает достаточно.

[Сергей delphinpro]

raulvodov, или flex-shrink:0 всем колонкам. или всё вместе.

[Raul Abdullin]

Сергей, а ширину для .container .column в моем случае задавать? не совсем просто понимаю, сколько процентов задавать, я-то как раз и надеялся, что флексы сами распределяют равномерно проценты среди колонок

[Raul Abdullin]

Сергей, попробовал сделать для .container .column { flex-shrink: 0; } и в процентах задать ширину width: calc(100% / 6); Все колонки, кроме одной стали одинаковой ширины take.ms/0yqUC

[Антон Спирин]

raulvodov, я бы вам посоветовал Новая Большая Книга CSS почитать. В 17 главе там отлично flex разбирается. Все вопросы отпадут.
И еще вы тег p не по назначению используете.

Answer 1

[impexler]

проблема с горизонталью. посмотри smart-grid (https://www.youtube.com/watch?v=KFVoIzaGPYg&list=P...

Answer 2

[MeylisDay]

Колонки подстроились под текст. Можно просто указать фиксированную ширину, по твоему примеру:

.widget {
  width:150px;
}

Answer 3

[ne_pes]

просто задать определенную ширину, у тебя блок будет увеличиваться из-за контента в нем, делаешь фиксированную ширину для всех и flex-box и распределит по горизонтали