Contents
hide
The Flex Basis property specifies the initial size of a flex item before extra space in the container is distributed. This is used in place of the width property in the flex layout.
Note: Never use the width always use flex-basis to set the initial width of a flex item.
Flex Basis
Flex basis can accept values in Pixels (100px), Percentages (100%), ems (100em), rems (100rem) and keywords like auto. The default value is set to auto which sets the initial width based on the content of the item.
style.css
item-1 {
flex-fasis: 400px;
}
Note:
flex-grow and flex-shrink apply on top of the flex-basis. if flex-grow is set to 1 then the extra space is added to the flex-basis value (e.g. 400px) then for it can be 100px + 50px after growing.
flex-grow and flex-shrink apply on top of the flex-basis. if flex-grow is set to 1 then the extra space is added to the flex-basis value (e.g. 400px) then for it can be 100px + 50px after growing.
Flex Basis – Demo
See the Pen Flex Basis by rehmaanali (@geekstrick) on CodePen.
