Make Unordered list rensponsive with Flex box

Question

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>

I'm not sure what result you are looking for. The point of flexbox is that it can size and wrap elements dynamically. If you just wanted to have two rows with 4 elements each, you don't need it, just set `display: inline-block; width: 25%` on the `li` elements (see also https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row?rq=1 ) — matejcik, Aug 23 '18 at 07:39

Razvan Zamfir · Accepted Answer · 2018-10-25T12:45:03.627

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?

Nacorga · Answer 2 · 2018-08-23T13:24:11.010

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>

hii did you test your code? Its not working , try it yourself , here is fiddle https://jsfiddle.net/Mwanitete/ge36dcf8/118/ — The Dead Man, Aug 23 '18 at 12:44

score 0 · Answer 3 · answered Aug 23 '18 at 12:15

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

Make Unordered list rensponsive with Flex box

3 Answers3