How to make flex items wrap with a fixed width

Question

I'm trying to make a layout where div blocks of paragraphs wrap from left to right, each with a fixed width. Something like this:

However what I got is this, somehow the flex items are stacked on the left:

Code snippet here:

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.thing {
  padding: 10px;
  margin: 10px;
  width: 300px;
}

<div class="things">
  <div class="thing">
    {% for thing in things %}  <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
    {% endfor %}
  </div>
</div>

Does it have something to do with styling in Django templates?

There is actually no problem with your code. I tried it out in a fiddle (https://jsfiddle.net/m0nk3y/f05xhv4b/) and it works just fine. You don't even need to do `flex-flow: row wrap;` you can just do `flex-flow: wrap`. They are wrapping because the width of the container is not wide enough to fit multiple `.thing` — Gene Parcellano, Dec 12 '17 at 15:27
Make `.thing` the flex container, not `.things`. https://stackoverflow.com/q/37840646/3597276 — Michael Benjamin, Dec 12 '17 at 18:48

score 0 · Accepted Answer · edited Dec 12 '17 at 16:33

The changes you might need to make are as follows:

First, since you're using a for-loop to generate each thing which has a title, description, etc you need to take your Django code for the beginning and end of the loop outside of the <div class="thing"> as:

{% for thing in things %}
    <div class="thing">
    <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>   
</div> {% endfor %}

Add the property of justify-content: space-around; in your .things container to evenly distribute the space.
Instead of setting a width for .thing container use flex:0 1 25%; where 25% will be the width of the .thing container, you can also set it as an absolute value in px and it will wrap when they can't adjust anymore in the same row. If you change the '0' as '1', then you can have them stretch to uneven dimensions.

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-flow:row wrap;
  display: flex;
  justify-content: space-around;
}

.thing {
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:0 1 25%;
  background:red;
}

<div class="things">
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  
</div>

You are correct, the problem is that I should put for loop outside the whole div. . Also I tried , it works out fine without . Thank you. — yinkouya, Dec 13 '17 at 07:06

score 0 · Answer 2 · answered Dec 12 '17 at 16:29

You have to use justify-content:space-around to make space around the items to the parent .things and flex-basis:25% to set the initial length to the child .thing.

.things {
  font: 13px Verdana;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
}

.thing {
  flex-basis: 25%;
  padding: 10px;
  background: cadetblue;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid #fff;
}

<div class="things">
  <div class="thing">
    <h2>Title 1</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 2</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 3</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 4</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 5</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 6</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
</div>

I actually tried your suggestions before I posted this. The problem is I put the for loop wrong. Thanks anyway. — yinkouya, Dec 13 '17 at 07:08

How to make flex items wrap with a fixed width

2 Answers2