Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flex-wrap is not wrapping when I reduce the window size

Tags:

html

css

flexbox

I've set up a series of three containers and applied display: flex; and flex-wrap: wrap; to them but they aren't wrapping when I reduce the window size?

I've put the code below and seem to be getting nowhere in terms of getting to the root of the problem.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1;
  background-color: red;
}

.item2 {
  flex: 1;
  background-color: blue;
}

.item3 {
  flex: 1;
  background-color: green;
}
<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item3">
    <h1>ITEM3</h1>
    <p>flex: 1</p>
  </div>

</div>
like image 732
The Chewy Avatar asked May 23 '17 12:05

The Chewy


People also ask

Why is my flexbox not wrapping?

If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .

How do you force a flex-wrap?

If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.

What can I use instead of flex-wrap?

An alternative to using flex-wrap: wrap would be to switch from flex-direction: row to column using a media query. Show activity on this post. An other alternative to flex is to remove display: flex on the container and use display: inline-block on all item images.

How does flex shrink work?

The flex-shrink property is a sub-property of the Flexible Box Layout module. It specifies the “flex shrink factor” which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.


2 Answers

You need to use max-width instead of width on the container, you have to allow the container to shrink for the items to wrap.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  max-width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1;
  background-color: red;
}

.item2 {
  flex: 1;
  background-color: blue;
}

.item3 {
  flex: 1;
  background-color: green;
}
<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item3">
    <h1>ITEM3</h1>
    <p>flex: 1</p>
  </div>

</div>
like image 95
Chiller Avatar answered Sep 21 '22 13:09

Chiller


Here's why the items aren't wrapping:

You have a flex container set to width: 800px.

The container has three flex items set to flex: 1, which is shorthand for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

This means that the actual width of each item is 0 (flex-basis: 0), and each item is sized based on the available space on the line (flex-grow: 1).

So, in effect, you've sized each item to be one-third of the space on the line, whatever that may be. Therefore, each item can shrink to width: 0, and they will never wrap.

If you add content and/or width and/or flex-basis to one or more items, and the items grow to exceed 800px (the width of the container), then your flex items will wrap.

But note, they won't wrap based on your re-sizing of the browser window, because the container doesn't occupy width: 100% of the viewport. They will only wrap based on the width of the container.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1 0 250px;
  background-color: red;
}

.item2 {
  flex: 1 0 250px;
  background-color: blue;
}

.item3 {
  flex: 1 0 400px;
  background-color: green;
}
<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1 0 250px</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1 0 250px</p>
  </div>

  <div class="item item3">
    <h1>ITEM3</h1>
    <p>flex: 1 0 400px</p>
  </div>

</div>
like image 26
Michael Benjamin Avatar answered Sep 19 '22 13:09

Michael Benjamin