• CSS Flexbox – Complete Beginners Guide

  • Flex Basis

    Lesson List

    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.

    item-1 {
      flex-fasis: 400px;

    Apply with with flex basis

    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.

    Flex Basis Property
  • Enable Notifications    OK No thanks