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?

Answer 1

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> 

Answer 2

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>