Если, например, когда у всех элементов свойство flex-basis стоит auto, задать первому элементу .itm1 ширину 200% или 20000px, то он растягивается на максимально свободное пространство в контейнере, но не более. Почему так?
При flex-basis: auto ширина элементов высчитывается через width или, если width не указан, по ширине контента. Первый элемент не может занять всю строку, потому что flex-wrap по умолчанию nowrap, а место для остальных элементов тоже должно остаться.
Подробнее можете почитать здесь: https://medium.com/@stasonmars/%D1%80%D0%B0%D0%B7%...
Я имел ввиду не свойство flex-basis, а ширину width. Если для .itm1 задать width: 20000px; и убрать у него свойство flex-basis, то ширина не будет такой, какая она задана в css. Я не понимаю почему так.
Вы можете проставить хоть 1000000px, элемент все равно не будет такой ширины, потому что он ограничен шириной контейнера. А контейнер - это не блочный элемент (display: block), а флексовый, он по главной оси не растягивается.
Убрать flex-basis у элемента = поставить flex-basis: auto.
А при flex-basis: auto ширина берется по width. Если width не указан, то по контенту.
Но ширина каждого отдельно взятого элемента - предварительная, окончательно будет высчитана, когда этот элемент уложится в контейнер со всеми остальными.
У них же тоже flex-basis: auto, только ширина, в отличие от .itm1, не указана. Поэтому для них ширина высчитывается так, чтобы вместилось их содержимое, а для .itm1 берется ширина, максимально близкая к указанной вами, чтобы оставить нужное место для других элементов.
Такие вот пироги.
xversus, а как мне растянуть его на ширину большую длине контейнера, при это не заполняя содержимым (то есть не добавляя ничего внутрь элемента, управляя только css)?
xversus, спасибо.
На практике, конечно, это мало где применимо, просто хотелось узнать можно ли это сделать стандартными средствами без перелопачивания верстки :\
xversus, получается когда мы блоку задаем в css свойство width с каким-то значением, то блок не обязан соблюдать это правило? Зачем тогда нужно это свойство?
Drovosek01, блоковые контейнеры обязаны - они и растягиваются в зависимости от контента. Во флексбоксе все сложнее, т.к. кроме ширины отдельного элемента внутри надо еще учитывать много всего, включая ширину и высоту самого контейнера и других элементов внутри, возможность переноса не вмещающихся элементов на другую строку и т.д. Поэтому у элемента будет нужная вам ширина только если позволяют условия.
Например, в вашем случае:
- первому элементу задана ширина, заведомо слишком большая для контейнера
- растягивать контейнер по главной оси нельзя
- перенести на другую строку нельзя (flex-wrap: nowrap по умолчанию)
- а у остальных элементов тоже есть контент и паддинги, которые тоже надо учитывать, хотя бы по минимуму
Поэтому в итоге в контейнере элементы умещаются так, как будет оптимальнее, "чтобы всем было хорошо".
