Flexbox CSS3 #4 — управляем размерами блоков

Это урок №4. В видео оговорился – прошу прощения.

Сегодня мы научимся тонко управлять размерами блоков. Узнаем про их главную величину, которая зависит от направления главной оси.

Занятие получилось длинное (я еще и вырезал минут 5 из него), так как пришлось много объяснять - как вычисляются размеры блоков. Зато 5 урок, который я уже записал – очень легкий и самый интересный :) После 125 лайков – он ваш!
Буду признателен, если кто-то вычислит, как считается ужимание блоков во flex-shrink.

Автор видеокурса – Сергей Михалевич

Плейлист Flexbox CSS:

Больше уроков от lofblog: #loftblog
Все уроки по хештегу: #loftblogFlexbox
Полезные уроки для веб-программиста: #вебпрограммист
#Flexbox

Поставь лайк - смотивируй автора писать еще :)

[kids-man]

flex-shrink:
складываются части, которыми они делятся (3+2=5), далее каждый бокс делится на сумму (5), т.е. 250 px/5=50 px, далее первый бокс от базовой ширины (250 px) отдаёт 150 px (3x50 px) второму, а второй от базовой ширины (250 px) отдаёт 100 px (2 x 50 px) первому, вот и получаются 200 px и 300 px; надеюсь расписал доступно)

[ВячеславГончаров-ло]

Серега. Ты прям Волшебник. Нет слов, одни эмоции. Так держать

[arthurirgashev]

а урок зачетный, до этого статьи читал - не разобрался. тут всё оч хорошо рассказано.
Спасибо

[_Fantom_.]

Видос бомбезный! Все доступно расписал и наглядно показал..

[amirrpp]

Тайна flex-shrink:
Вводные:
container_size = размер контейнера
summ_el = суммарный размер всех елементов (flex-basis)
diff = summ_el - container_size;
Для определения размера елемента необходимо:
1) для каждого елемента найти a:
a = flex-basis*flex-shrink
2) Просуммировать полученные на предыдущем этапе значения:
s = a1 + a2 + ... + an;
3) для каждого елемента найти коэфициент k:
k = a/s
4) размер елемента будет равен
size_el = flex-basis - diff*k

[shaoful]

Крутейшее свойство, разом можно и не париться с margin-ами при вёрстке тех же новостных блоков и их адаптивности.
Но, как грится, тут палка о двух концах, есть адаптивность, но само свойство flex не поддерживается даже той же мобильной версией хрома (сам начал работать в веб-студии и решил испробовать flex-модель уже в рабочих условиях).
В таком случае приходится пользоваться старой (2011 года вроде) версией flex-box, что является дополнительной морокой. Вот такие пироги

[АндрейУльяницкий-ую]

Здравствуйте у меня проблема отображения в хроме сайта 14:45
после того как меняем nowrap на wrap у меня все элементы растягиваются на всю ширину...В чем причина может быть? Я несколько раз все перепроверил, но результат одинаковый в итоге!

[qdsdsdsqdssdsd]

спасибо, это действительно упрощает многие вещи

[povtukatb]

Подкастик о flex-shrink - размер зависит прямо пропорционально от его значение, если у 1-го блока flex-shrink: 1;, а у 2-го блока flex-shrink: 2 - то размер 2-го блока будет в 2 раза больше чем первого. Т.е. занимать 2/3 всей площади выделенной под эти блоки.

[arthurirgashev]

флек шринк высчитать легко же.
сумма контейнеров минус общая ширина. ну и делится на соотношение.
например: родитель в 500пх, два дочерних в 300пх. 600-500=100пх.
у левого шринк в 3, у правого - 1.
итого: шринк_тотал =4. 100пх\4 и разбрасываем по частям на элемент, в зависимости от коэффициента.

[davidkroods]

вот алгоритм при flex-shrink у элемент-1 = " 3 " а у элемент-2 = " 1 " для тех кто не понял до конца ((3+1)=4, 500/2=250, 250/4=62.5, 62.5*3=187.5, (250+187.5 - 62.5)=375px) у елемент-2 будет ширина в 375px

[ВладиславСоколов-цо]

как называется расширение на 1:33, которое автозаменяет р0 + m0 на padding и margin ?

[Gorr]

flex-grow не работает когда в flex-basis % ?

[molloko]

А не подскажите почему у меня флекс блоки с заданной главным размером в 100 пикселей растягиваются больше ста пикселей, т.к. контент не вмещается. а у автора контент выходит за пределы контейнера 5:46

.main {
margin: 20px auto;
border: 1px solid #ccc;
padding: 0;
background: #fff;
border-radius: 3px;
height: 500px;
max-width: 500px;
display: flex;
justify-content:center;
align-items:stretch;
align-content:center;
flex-flow: row nowrap;
}

.bl{
padding: 0;
margin: 0;
border-radius: 3px;
flex-basis: 100px;
}

[roman-romadin]

Всё хорошо. Только может показывать одновременно код в Brackets и Chrome с его панелью отладки? Чтобы сразу видеть код и его результат.

[sergl]

К сожалению, firefox и Opera как-то не хотят работать с flex-basis... Только что столкнулся с этой проблемой, при просмотре видео и попытке это "запустить" на них...(( префиксы добавил, но ничего не поменялось...

[perfectworldmoon]

Почему так мало лайков просишь, не стесняйся

[Skarrus]

Надо было с нечетным кол-вом элементов показывать -)

[АлександрНикитин-нщ]

Хорошие уроки, спасибо!
Только школьную математику с пропорциями можно было пропустить.

[pegas]

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