Make Unordered list rensponsive with Flex box

I have app in which I'm using a flex box to display 8 list items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?

Here is jsfiddle : https://jsfiddle.net/Mwanitete/ge36dcf8/15/

.parent
display: flex;
flex-wrap: wrap;

.child
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
flex: 1 0 20%;
margin: 5px;
height: 100px;


<div class="parent">
<ul class="child">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</div>

display: inline-block; width: 25%

li

3 Answers
3

have a look at this (almost) exhaustive tutorial to be able to use the full power of flexbox. I got this result:

.parent
font-family: Arial, sans-serif;
font-size: 12px;


.child
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 5px;
padding: 0;
height: 100px;


.child li
width: 23%;
height: 49px;
margin: 1px 1%;
text-align: center;
background: #069;
color: #fff;
display: flex;
align-items: center;
justify-content: center;


<div class="parent">
<ul class="child">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</div>

Is it (similar to) what you want?

Reduce the max-width of the div.parent based on the media query
Ex :

@media(min-width: 1100px)
.parent
max-width: 500px;



@media(max-width: 1099px)
.parent
max-width: 250px;




Note: this is just an example, you should change the max-width based on the ul li content

I had a similar problem some time ago and was able to solve it with this code. I hope it'll help you.

*
box-sizing: border-box;


.parent
display: flex;
flex-wrap: wrap;


.child
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100px;
padding: 0;
margin: 0 auto;


.child li
padding: 10px 20px;
background: #111;
color: #fff;
width: 25%;
text-align: center;
border: 5px solid #fff;
list-style: none;


<div class="parent">
<ul class="child">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.