One place for hosting & domains

      flexwrap

      Improve Responsiveness with flex-wrap in CSS


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      The flex-wrap property is a quick way to make parent elements more responsive on various screen sizes. As with flexbox in general, it simplifies page layouts so you don’t have to manually set breakpoints or manage the page overflow yourself.

      Flexbox and Managing Element Wrapping

      flex-wrap is a property specific to the flexbox (or “flexible box”) module in CSS. Flexbox is a CSS layout model that manages how child elements are displayed in a parent element. This means flexbox can be useful for general page layout (like header, nav, footer, etc). More importantly, though, it can be applied to any element on the page that has child elements.

      div.parent {
        display: flex;
      }
      

      Making an element a flex container is as simple as adding display: flex; to its CSS declarations.

      Once there’s a flex container, flex-wrap can be declared on that same parent element to determine how to handle child elements that do not fit on one line by default.

      div.parent {
        display: flex;
        flex-wrap: wrap;
      }
      

      Flex wrap example

      The parent element must be made a flex container before flex-wrap can be applied. The flex-wrap property gets applied to the flex container only (not the child elements).


      Default Setting for flex-wrap

      By default, a flex container will try to fit its child elements on one line. This is also known as nowrap for the flex-wrap property.

      For this example, let’s first start with a non-flex container where the children–block elements– will each be on a new line:

      If we make the parent element a flex container, the children will all go on one line.

      .flex-container {
        display: flex;
        flex-wrap: nowrap;
      }
      

      The default flex-wrap setting for flex containers is “no-wrap”. That means you don’t need to explicitly declare it like we did above.

      Now we have our child elements on one line but, even if your window doesn’t have enough room for them, the child elements will stay on one line. As the window size changes, the child elements will continue to squish together until they eventually overflow the parent element.

      So, how do we fix this? With flex-wrap!

      Get to Know Your flex-wrap Options

      There are three valid values for the flex-wrap property:

      • nowrap: This is the default value for flex containers, so it does not need to be explicitly declared unless you’re overriding other styles. Child elements will always stay on one line.
      • wrap: Using wrap will allow your child elements to wrap to additional lines when they no longer fit on the initial line. The element(s) that don’t fit will wrap to the bottom-left in the parent element.
      • wrap-reverse: This will cause the opposite effect of wrap. Instead of wrapping the overflowing element(s) to the bottom-left, it will wrap to a new line above the first child elements at the top-left of the parent.

      To see the difference between wrap and wrap-reverse, compare the following two examples by resizing your window:

      .flex-container {
        display: flex;
        flex-wrap: wrap;
      }
      

      This first example has overflowing elements going to a new line below the first child elements.

      .flex-container {
        display: flex;
        flex-wrap: wrap-reverse;
      }
      

      This second example does the opposite and wraps the overflowing elements above the first child elements. wrap-reverse is less common to use but it’s still good to have in your CSS toolkit. 🥳


      Flexbox Shorthand: flex-flow

      If you’re someone who prefers to write your code on as few lines as possible, you’ll be happy to know flex-wrap is one part of the flexbox shorthand flex-flow.

      flex-flow is a flexbox property that replaces flex-wrap and flex-direction.

      Quick Intro to flex-direction

      flex-direction determines if your child elements should be in a row or column. The four options are: row, column, column-reverse, and row-reverse. The default value for flex-direction is row.

      Using flex-flow

      flex-flow declares the flex-direction of the parent element first and the flex-wrap value second. It should only be used if you need to explicitly declare the flex-direction and flex-wrap to differ from the default values.

      This means you can write these flex properties either like this:

      .backwards-flex-container {
        flex-direction: row-reverse;
        flex-wrap: wrap-reverse;
      }
      

      Or with the flex-flow shorthand to get the same effect:

      .backwards-flex-container {
        flex-flow: row-reverse wrap-reverse;
      }
      

      This “backwards” example will have the child elements in a row but in the reversed order (the flex-direction). It will also have the overflowing children wrap to a new row above the first row. ✨

      flex-flow is the only flexbox shorthand that specifically includes flex-wrap but there are many other ones. If you prefer shorthand, most flexbox properties have shorthand options! 💅


      Browser Support

      In general, flexbox and flex-wrap are very well-supported in all modern browsers. Even Internet Explorer (IE) has partial support for flexbox and flex-wrap after IE9.

      Flexbox Prefixes

      Using prefixes for flexbox and flex-wrap is less common these days and whether you use them will depend on which versions of browsers you’re trying to support.

      .parent {
        display: flex;
        display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
        display: -ms-flexbox; /* IE10 */
      
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
      }
      

      Note that flex-wrap is one property of flexbox that is specifically not supported by some old versions of browsers, like Firefox.

      To be sure if prefixes are needed, check Can I Use for the most current information on browser support, especially if you’re supporting old versions of browsers.



      Source link