CSS CSS Flexbox Layout Flexbox Properties Wrapping Flex Items

wrap isn't working

I am trying to make flex-wrap work but it doesn't seem to work. I have created codepen for it. https://codepen.io/codearts/pen/wEzpNW

1 Answer

Steven Ang
Steven Ang
40,657 Points

You need to make your ul into a flex container as well. Then you target the ul and add flex-wrap then it will work. The reason behind this is because ul is only a flex item, not a flex container so the items inside the ul will not be affected by the flex-wrap from the container since the li are the grandchildren of the container.

.container ul {
  display: flex;
  flex-wrap: wrap;