Flex Basis

on June 3, 2020
🔥 1099 views
Contents hide
1) Flex Basis
2) Flex Basis – Demo

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;
}

Apply with with flex basis

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 Basis – Demo

See the Pen Flex Basis by rehmaanali (@geekstrick) on CodePen.