Flex Wrap

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.

---

Horizontal Wrapping

Wrap

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

And Markup Will be

<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:

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.

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

And Markup Will be

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

After this what we will get to display is:

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.

.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 { ... }

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

After this what we will get to display is:

Similarly we can reverse wrap by just changing class which will arrange the items from right to left

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

After this what we will get to display is:

DEMO – Vertical Wrapping

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