×
  • 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.


    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