×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Flow

    Lesson List

    In this lesson, we will learn about Flex Flow property which is pretty straightforward it is a shorthand for flex-direction and flex-wrap.

    by default, the property is set to row and nowrap which is the default of the individual property.


    Flex Flow Property

    style.css
    
    .flex-flow-reverse-wrap {
      /*   flex-direction: row-reverse; */
      /*   flex-wrap: wrap; */
      flex-flow: row-reverse wrap;
    }
    

    As you can see above we can use any combination of flex-direction and the flex-wrap and use in a single property which is flex-flow and the screen will adjust according to that properties.
    and your markup would be

    index.html
    
    <div class="container d-flex flex-flow-reverse-wrap">
     ...
    </div>
    

    And what you will get to see is:
    flex-flow

    Similarly

    We can also try the column-reverse and wrap-reverse as a value of a flex-flow property

    style.css
    
    .flex-flow-col-wrap-reverse {
      /*   flex-direction: column-reverse; */
      /*   flex-wrap: wrap-reverse; */
      flex-flow: column-reverse wrap-reverse;
      height: 150px;
    }
    

    And what you will get to see is:
    flex-flow reverse

    Note:
    Property value must be in order to { flex-flow: <flex-direction> <flex-wrap> }.
    All combinations of two properties works fine.

    DEMO

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


  • Enable Notifications    Ok No thanks