CODEWITHSUNDEEP
htmlcssflexboxbootstrap-4
Morvael
Morvael

Reputation: 3567

Flex lists not wrapping

I have a seemingly simply requirement, a list <ul /> of items <div />s of a fixed size. The items in the list should layout from left to right filling the available space before wrapping onto the next line.

Here is the basic HTML

<ul class="list-unstyled d-flex">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

The class .d-flex is simply:

.d-flex {
    display: flex !important;
}

and the class .list-box just controls the sizing of the boxes.

What happens is the boxes are laid out in a single row from left to right, if there are too many boxes for the screen width the <ul /> gains a horizontal scroll bar.

Here's a working example:

.list-box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<h1>Bootstrap 4 Flex List</h1>
<ul class="list-unstyled d-flex">
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
</ul>

Why don't the <li />s wrap?

Upvotes: 1

Views: 1855

Answers (2)

Just a student
Just a student

Reputation: 11020

The short answer is that by default, items in a flexbox layout will not wrap. The flex-wrap property defaults to a value of nowrap. Setting it to wrap will make the items wrap as you intend to.

.d-flex {
    display: flex !important;
    flex-wrap: wrap; /* add this */
}

 

Alternatively, you can get rid of the flexbox layout altogether. Just set the list items to display as inline-block. They will be placed one after another and wrap to new lines as necessary.

.my-list {
  padding: 0;
  list-style-type: none;
}

.my-list li {
  display: inline-block;
}

.list-box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 2px;
}
<h1><strike>Bootstrap 4 Flex</strike> List</h1>
<ul class="my-list">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
</ul>

That's good old CSS 2 stuff. You don't even need Bootstrap.

Upvotes: 0

patelarpan
patelarpan

Reputation: 7991

you need to use flex-wrap class with d-flex. codepen

<ul class="list-unstyled d-flex flex-wrap">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

About Flex wrap

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.

Upvotes: 5

Related Questions