Border-box, Flex, padding — меняется размер?

Question

[Eugene]

Привет. Вопрос из серии базы, но я уже запарился.

Есть 3 флекс элемента, они все растягиваются по родителю на 100% ширины.
У всего стоит border-box. А значит паддинги не учитываются в размере элемента (они же идут внутри).

Однако при добавлении какому-то флексу паддингов, он по итогу становится больше.
Даже если место внутри позволяет добавить еще паддинга.

Изучив еще раз спецификацию и работу flex-shrink/basis/grow - я все еще не въхехал, почему он таки увеличивает размер.

Как я понял, тот блок что имеет паддинги (70пх) становится в базовом размере как 140пх.
В то время как остальные нет. А может и не так понял.

Да, конечно я могу им всем добавить паддинги и они станут все одинаковые. Но если мне надо будет в каком-то элементе разместить контент, а в каком-то картинки на всю высоту/ширину - Мне придется их абсолютить и ставить overflow hidden обертке, иначе будут отступы. Чего я делать само собой не хочу и что-то подсказывает внутри что это явно неверно.

У меня флексы это item + у них доп.классы. Типо модификаторы. Как раз через них и задаю доп.свойства. Если в 3-й я добавляю flex-basis: calc(100% - 280px);
Паддинги 70пх уможенные на 4 - это решает проблему. И то, он все равно на какое-то количество пикселей шире чем остальны. Но неужели это правильно?
+ не совсем понятно почему 280, а не 140. Ведь паддинги стоят только слева и справа. paddin: 0 70px; Но нет, если я пишу в 3-м модификаторе flex-basis: calc(100% - 140px); и уменьшаю ширину браузера - он все равно больше чем остальные...

Да, я могу решить проблему просто используя гриды и поставить 1fr 1fr 1fr. Но тот факт что я не понимаю почему так происходит (не до конца понимаю) и не знаю как это решить - изнутри не щадит...

Помогите разобраться.

Песочница: https://codepen.io/divside/full/rNZrrzo (3-й флекс)

Answer 1

[Виталий Першин]

Comments

[Eugene]

Объясни пожалуйста.

Ты сказал дочкам: "вы минимум 30% в базовом размере от родителя.flex-basis: 30%;"
Указав flex-shrink: 0; ты запретил дочкам усекаться/быть меньше чем 30% от родителя.

Поставив flex-grow ты разершил им увеличиваться в 1 раз. Одинаково для всех.

имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow

То есть они все сейчас занимают одинаковую долю по родителю. Ибо кф одинаковый. Но ведь если я его не указал и он 0 - он все равно 0 для всех. То есть одинаковый. Понимаю что "ну оно так работает", но чисто логически нахожу странным.

Правильно ли я понимаю, что по сути проблема то было в отстутствии указани дочкам flex-grow, ибо по дефолту это 0?

+ вопрос: Почему 30%? Почему не 33.33%?

[Виталий Першин]

Eugene,

Почему 30%? Почему не 33.33%?

Если быть более точным, то в данном случае flex-basis: calc(100% / 3 - 20px);

Правильно ли я понимаю, что по сути проблема то было в отстутствии указани дочкам flex-grow, ибо по дефолту это 0?

flex-grow: 1; используем чтобы расстянуть, если элементов меньше 3-х, но чтобы все они стали одинакового размера мы используем жадность flex-shrink: 0;. Собственно проблема в жадности, там хоть какое значение ставь, элемент будет сам вычислять размер. Тут я выкрутился с 30% потому что рассчитываю что элементов в ряду будет не больше 3-х

[Eugene]

Виталий Першин, Значит по сути, флекс тупо игнорирует правило border-box я так понимаю? И учитывает паддинги, хотя это правило сделано как раз чтобы их не учитывать...

Ну типо, я понимаю если бы я сжимал родитель, а т.к у меня у правого паддинги по 70 (итого 140), если бы я сжал родитель так, что оно бы уже не влезало - оно бы отработало и оставило блок минимум на размер этих паддингов. Однако оно "работает" постоянно..

И значение явно не "на 140пх больше чем прошлые". А какое-то с неба.
У меня на экране первые 2 флекса 434пх, а правый 532. Разница 98, что явно не 140.

Вот этого я не понимаю. Он нарушает правило border-box + ХЗ по какому правилу.

[Виталий Першин]

Eugene, сложный вопрос, я такие вещи уже просто на опыте делаю, тут насколько я понимаю, за счет padding становится меньше места для контента, а не имея жадности размеры флекс элементов подбираются исходя из их содержимого

[Виталий Першин]

Eugene, условно говоря у нас есть блок с padding и без, флекс элемент понимает, что даже если контента в этих блоках одинаково, то места в блоке с padding меньше, тут в принципе border-box никак не влияет. Поэтому и размер блока равен такому непонятному значению

[Eugene]

Виталий Першин, Виталий Першин,

сложный вопрос

Вот и я так сижу уже фиг знает сколько, а понимать хочется))

+ еще момент такой интересный, ты указал flex-basis: calc(100% / 3 - 20px);

А ведь элемента то 3 в первой строке. То есть по логике должно было быть 40пх. Я поставил - ничего не поменялось. Но вот просто flex-basis: calc(100% / 3); - эта зараза не понимает и выкидывает за пределы родителя. НО, если указать просто flex-basis: 100%;, то он все упихнет в родителя... НО, с этим "багом". Короче какая-то unlogic.

padding меньше, тут в принципе border-box никак не влияет.

Что вроде как странно, ведь оно как раз для рассчета размером элемента, а не их внутренностей. Значит реально игнорирует и работает по своему правилу. Вот уж не думал что спустя столько лет я найду реально баг флекса. Ведь это баг по сути.

Как считаешь, вот если привести пример с картинками как я писал выше, как было бы правильнее делать:
Вот так калькуляцию выставлять, или положить болт и впинхуть картинки абсолютом относительно item с overflow hidden?
То есть оставить padding во всех блоках, но "обойти" их там, где надо вставить пикчи. Просто по сути - результат одинаковый, а возьни меньше.

Вот у меня пример был - https://codepen.io/divside/full/RwYLrLV
Визуально - одинаковые. Но я же дизайнер, я же знаю что первый собака больше чем второй..

[Eugene]

Виталий Першин, Почему спрашиваю:
Это благо если блоки такие простые. А ведь может быть wrap. Разный контент. В одной строке 3 элемента, а в другой 2. И тут уже начнутся пляски которые явно уже не решить такой калькуляцией... Условия будут уже другие.

Да, грид тут будет лучше. Но ведь грид не всегда был.

[Виталий Першин]

Eugene,

То есть по логике должно было быть 40пх

Точно не 40. В данном случае gap только мешает. Чтобы было точное значение нужно делать по примеру того же bootstrap где row вылазит за пределы контейнера, а col компенсирует это отступами. Примерно так:

.wrap {
width: calc(100% + 20px);
margin: 0 -10px;
}
.item {
  flex-basis: calc(100% / 3 - 20px);
  margin: 0 10px;
}

Но вот просто flex-basis: calc(100% / 3); - эта зараза не понимает и выкидывает за пределы родителя.

Все правильно, теперь блоки с учетом gap не помещаются

Как считаешь, вот если привести пример с картинками как я писал выше, как было бы правильнее делать:
Вот так калькуляцию выставлять, или положить болт и впинхуть картинки абсолютом относительно item с overflow hidden?
То есть оставить padding во всех блоках, но "обойти" их там, где надо вставить пикчи. Просто по сути - результат одинаковый, а возьни меньше.

Нужно изучать дизайн и тз, судя по описанию, можно использовать и гриды и флексы, раньше float использовали и как-то получалось

[Eugene]

Виталий Першин,

Все правильно, теперь блоки с учетом gap не помещаются

Да, конечно. Понятно. Ведь получается 33.33% + GAP. Но ведь если я явно укажу 100% (правда без жадности) то он тем более не должен влезать, равзе нет?!) Но нет, все сжимает сам. Вот этот парадокс меня и бесит если честно.

Короче фишка в жадности. И я понял что не стоит не прописывать flex: ***. Ты думаешь что все очевидно отработает, а вот фигу.

Спасибо большое за ответ. Понял что мне буквально надо изнасиловать эти flex-basis/shrink/grow для спокойствия))

[Виталий Першин]

Eugene,

Но ведь если я явно укажу 100% (правда без жадности) то он тем более не должен влезать, равзе нет?!)

Нет, без жадности блок попросит 100%, а ему дадут столько сколько есть.. А вот с жадностью он получит все 100%

[Eugene]

Виталий Першин,

Нужно изучать дизайн и тз

https://codepen.io/divside/full/RwYLrLV
Вот по примеру песочницы выше.
2 одинаковых флекса. в row. Занимают 50% от родителя, ну и оступ между ними. То есть абсолютно идентичны. "кубик слева, кубик справа". Только в левом контент, а в правом пикча.

Позволительно ли будет считерить, дав абсолют картинке и не париться (оставив паддинги у обоих блоков), или все же дурной тон?

[Виталий Першин]

Eugene, А чем это плохо? если сама пикча не должна влиять на другие элементы, то без разницы как её прикрутить, с абсолютом иногда даже лучше, можно при наведении добавить анимацию увеличения к примеру или поверх еще текст добавить

[Eugene]

Виталий Першин,

можно при наведении добавить анимацию увеличения к примеру или поверх еще текст добавить

Что как раз у меня и есть))
Понял, значит просто "другая реализация" и в таком контенкте позволительно. А может даже и приветствуется.

Спасибо Виталий.

[Виталий Першин]

Eugene, Пожалуйста. Рад был помочь.