×
  • 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
    .
    .
  • Enable Notifications    OK No thanks