Comments 8
Не понимаю, а что тут особенного? Обычная вёрстка на обычных флексах. Читал и ждал чего то особенного, чуда не свершилось.
Спасибо за статью. Можно к вам в компанию? Тоже мечтаю стать адептом vue. js
Я бы числа до 10 по правому краю выровнял. Режет глаз, когда цифры по левому краю...
Мне показалось что Вы неправильно понимаете значения flex-basis.
Я уже не первый раз встречаю как люди совершенно не понимают принципа работы flex-basis flex-grow и flex-shrink и хуже всего то, что это неправильное понимание качует из статьи в статью. Из за недопонимания этих принципов у многих людей верстка на флексах представляет из себя черную магию по манипулированию значениями: а что если так — ух ты, а если так — ух ты два.
Та картинка что вы привели правильная но она отражает частный случай и скорее людей вводит в заблуждение.
Я уже не первый раз встречаю как люди совершенно не понимают принципа работы flex-basis flex-grow и flex-shrink и хуже всего то, что это неправильное понимание качует из статьи в статью. Из за недопонимания этих принципов у многих людей верстка на флексах представляет из себя черную магию по манипулированию значениями: а что если так — ух ты, а если так — ух ты два.
Та картинка что вы привели правильная но она отражает частный случай и скорее людей вводит в заблуждение.
Под спойлером пояснения
flex-basis — это значение которое сообщает какого размера будет блок в момент когда его располагают на основной линии (потоке флекс элементов). Разместив — вычисляется цифра сколько осталось свободного пространства или наоборот сколько требуется свободного пространства чтобы все блоки влезли в контейнер. По умолчанию flex-basis равно auto что значит что размер блока должен быть равен содержимому контента в блоке — не текста, а всего содержимого блока. Установив значение в 0 вы просто сообщили что размер блока равен нулю.
flex-grow и flex-shrink это не коэффициенты расширения или сжатия блока. Это коэффициенты как распределяется оставшееся (или нужное) пространство.
Когда все элементы расставлены по основной линии может либо
а) остаться свободное место не занятой блоками
б) не хватать места чтобы все блоки разместить.
Вычисляется сколько места остается (не хватает) и это место пропорционально значениям соответствующего параметра(flex-grow и flex-shrink) делится между элементами.
То есть основное недопонимание происходит от того что люди думают будто flex-grow / shrink занимается сжатием или расширением всего блока, а они всего лишь определяют правила КАК распределяется свободное пространство ЕСЛИ оно есть или наоборот, на какой процент сожмется блок от необходимого пространства для отображения всех блоков. И в случае когда нет необходимости разрешать вопрос по распределению свободного или нужного пространства эти значения никаким образом не влияют на размер блоков потока.
Пример:
Ширина контейнера = 400px
Ширина блока 1 flex-basis = 100px (flex-grow:100) (flex-shrink=500)
Ширина блока 2 flex-basis = 50px (flex-grow:100) (flex-shrink=500)
Ширина блока 3 flex-basis = 70px (flex-grow:100) (flex-shrink=500)
Сумма = 220px
Осталось свободного пространства 400 — 220 = 180 px
Для каждого блока который имеет flex-grow выполнится следущая процедура:
180 (оставшееся место) / 300 (сумма значений всех flex-grow grow потока) * flex-grow элемента = 60px
то есть к каждому блоку добавится ровно 60 px вне зависимости от того, какого размера они были до этого.
И наоборот если размер контейнера у нас был 100px а размер элементов тот же,
выходит что 100 — 220 = — 120 не хватает для того чтобы разместить все блоки потока.
120 / 1500 (сумма значений flex-shrink всех элементов потока) * flex-shrink 500( в нашем случае он одинаковый для всех = 40
Поскольку у нас все блоки имеют одинаковое значение shrink то каждый блок уменьшиться ровно на 40 px
Блок 1 = 60
Блок 2 = 10
Блок 3 = 40
Так я думаю будет понятней.
flex-grow и flex-shrink это не коэффициенты расширения или сжатия блока. Это коэффициенты как распределяется оставшееся (или нужное) пространство.
Когда все элементы расставлены по основной линии может либо
а) остаться свободное место не занятой блоками
б) не хватать места чтобы все блоки разместить.
Вычисляется сколько места остается (не хватает) и это место пропорционально значениям соответствующего параметра(flex-grow и flex-shrink) делится между элементами.
То есть основное недопонимание происходит от того что люди думают будто flex-grow / shrink занимается сжатием или расширением всего блока, а они всего лишь определяют правила КАК распределяется свободное пространство ЕСЛИ оно есть или наоборот, на какой процент сожмется блок от необходимого пространства для отображения всех блоков. И в случае когда нет необходимости разрешать вопрос по распределению свободного или нужного пространства эти значения никаким образом не влияют на размер блоков потока.
Пример:
Ширина контейнера = 400px
Ширина блока 1 flex-basis = 100px (flex-grow:100) (flex-shrink=500)
Ширина блока 2 flex-basis = 50px (flex-grow:100) (flex-shrink=500)
Ширина блока 3 flex-basis = 70px (flex-grow:100) (flex-shrink=500)
Сумма = 220px
Осталось свободного пространства 400 — 220 = 180 px
Для каждого блока который имеет flex-grow выполнится следущая процедура:
180 (оставшееся место) / 300 (сумма значений всех flex-grow grow потока) * flex-grow элемента = 60px
то есть к каждому блоку добавится ровно 60 px вне зависимости от того, какого размера они были до этого.
И наоборот если размер контейнера у нас был 100px а размер элементов тот же,
выходит что 100 — 220 = — 120 не хватает для того чтобы разместить все блоки потока.
120 / 1500 (сумма значений flex-shrink всех элементов потока) * flex-shrink 500( в нашем случае он одинаковый для всех = 40
Поскольку у нас все блоки имеют одинаковое значение shrink то каждый блок уменьшиться ровно на 40 px
Блок 1 = 60
Блок 2 = 10
Блок 3 = 40
Так я думаю будет понятней.
По поводу flex-basis: это я конечно не прав, что был неправильно понят, в моем случае был только текст, ну и мне проще всего было сказать, что имена размеры текста ломают верстку, а правильнее было сказать блоки с текстом. Поэтому, чтобы убрать учет размеров, надо было сделать flex-basis: 0, который по сути задает размер блока. Хотя справедливости ради я написал, что:
flex-grow по сути распределяет пустое пространство
А вот flex-shrink это для меня пока черная магия, это точно. Тут бы тоже хорошая картинка не помешала. Кстати может подскажете тогда почему когда добавил:
.header {
padding: 0.25em;
display: flex;
justify-content: space-between;
}(вторая с конца картинка), почему верстка поплыла, и пришлось юзать flex-shrink: 0. Кстати я проверил что если обернуть header простым div-ом, то, в моем случае, это равносильно использованию flex-shrink:0
Sign up to leave a comment.
Верстаем flex-календарик