×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Wrap

    Lesson List

    In this lesson, we will look into another great property which is Flex Wrap Property.

    By default, all the flex item in a container will try to fit into a single line if there is not enough space the items simply overflows.
    Looking at our current if you reduce the width of the browser the items begin to shrink and then will no longer in view.
    we can change this behavior using the property.


    Flex Wrap Properties

    let’s go back to our CSS file in which we will create some another common class for the properties.
    As the property accepts the 3 possible values. i.e.

    Value Description
    nowrap Default value. Specifies that the flexible items will not wrap
    wrap Specifies that the flexible items will wrap if necessary
    wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order

    Horizontal Wrapping

    Wrap

    style.css
    
    .flex-wrap{
      flex-wrap: wrap;
    }
    

    And Markup Will be

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

    When we set the value to wrap the items will not overflow and will break into the next line i.e. wrap all the items.
    After this what we will get to display is:
    wrap items
    Wrapping take place only when it is needed and if there is no enough space for just one item, item 5 example you can see only item 5 only moves to the next row.
    if you reduce the size further item 4 will also move to the next row asn so on.

    Wrap Reverse

    what wrap reverse does is instead of items falling into the row below it climbs into the row above.
    let’s create an example of it.

    style.css
    
    .flex-wrap-reverse {
      flex-wrap: wrap-reverse;
    }
    

    And Markup Will be

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

    After this what we will get to display is:
    wrap-reverse items

    DEMO – Horizontal Wrapping

    See the Pen
    Flex Wrap – Horizontal Wrapping
    by rehmaanali (@geekstrick)
    on CodePen.


    Vertical Wrapping

    Wrap with direction column

    Consider a container with limited height and we want to wrap the items inside that container.
    without the wrap, the items will overflow and takes the more height so to slove that we can look into this example.

    style.css
    
    .container {
        border: 6px solid black;
        height: 112px; /* fix height for container*/
    }
    /* Our common classes which we have made through out the lessons */
    .d-flex { ... }
    .flex-wrap { ... }
    .flex-column { ... }
    
    index.html
    
    <div class="container d-flex flex-wrap flex-column">
      ...
    </div>
    

    After this what we will get to display is:
    column wrap items
    Similarly we can reverse wrap by just changing class which will arrange the items from right to left

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

    After this what we will get to display is:
    column wrap-reverse items

    DEMO – Vertical Wrapping

    See the Pen
    Flex Wrap – Vertical Wrapping
    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