• 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

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.