How to Control Element Wrapping in CSS Flexbox?

Flexible Element Wrapping Control in CSS Flexbox

The need to specify an element after which CSS flexbox elements should wrap is not directly addressed in the flexbox standard. However, a clever technique can be employed to achieve this effect.

To force wrapping after a specific element, follow these steps:

1. Set display: flex; and flex-wrap: wrap; on the container element.
2. On the element you want to wrap after, set flex-basis: 100%;.

This solution effectively sets a minimum width for the element, causing it to switch to its own line when necessary.

For example, consider the following markup:

<code class="html"><ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul></code>

And the following CSS:

<code class="css">ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li:nth-child(4n) {
  flex-basis: 100%;
}</code>

This will cause the items to wrap after the fourth element, creating two lines:

1 2
3 4

The above is the detailed content of How to Control Element Wrapping in CSS Flexbox?. For more information, please follow other related articles on the PHP Chinese website!