×
  • CSS Flexbox – Complete Beginners Guide

  • Properties of Flex Item

    Lesson List

    So far we have covered all the properties that work on a flex container. Now we will look into the Flex Item Properties.


    Order

    The order property controls the order in which the items appear in the flex container.

    syntex
    
    /* Standard syntax */
    div#red {order: 2;}
    div#blue {order: 4;}
    div#green {order: 3;}
    div#yellow {order: 1;}
    
    /* Safari 6.1+ */
    div#red {-webkit-order: 2;}
    div#blue {-webkit-order: 4;}
    div#green {-webkit-order: 3;}
    div#yellow {-webkit-order: 1;}
    

    Flex Grow

    Flex grow defines the ability for a item to grow if necessary.

    syntex
    
    div:nth-of-type(1) {flex-grow: 1;}
    div:nth-of-type(2) {flex-grow: 3;}
    div:nth-of-type(3) {flex-grow: 1;}
    

    Flex Shrink

    Flex shrink defines the ability for a item to shrink if necessary.

    syntex
    
    div:nth-of-type(2) {
      flex-shrink: 3;
    }
    

    Flex Basis

    Flex basis specifies the initial main size of a flex-item.

    syntex
    
    div:nth-of-type(2) {
      flex-basis: 100px;
    }
    

    Flex

    Flex is shorthand for flex-grow, flex-shrink and flex-basis.

    syntex
    
    #main div {
      -ms-flex: 1;
      flex: 1;
    }
    
    /* IE 10 */
    #main div {
      -ms-flex: 1;
    }
    

    Align Self

    Wrap up flex item properties with the align-self property which allows alignment of individual items.

    syntex
    
    #myBlueDiv {
      align-self: center;
    }
    
    Properties of Flex Item
    .
    .

    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.
    Accept