Home > Article > Web Front-end > How to Control Element Wrapping in CSS Flexbox: Can I Force Flexbox to Wrap After a Specific Element?
How to Control Element Wrapping in CSS Flexbox
Question:
Is there a way to specify an element after which wrapping should occur in a flexbox layout? This would be useful for controlling the responsiveness of a list without adding extra markup.
Answer:
While there isn't an explicit "flex-break" property in the flexbox standard, you can achieve this effect by combining the following techniques:
Example:
<code class="css">ul { display: flex; flex-wrap: wrap; } li:nth-child(2n) { flex-basis: 100%; }</code>
In this example, items in the list will wrap to a new line after every other element (depending on available space). By adjusting the value of "nth-child()", you can control which elements cause the wrap.
For a more complete demonstration, see the provided JSFiddle: http://jsfiddle.net/theazureshadow/ww8DR/
The above is the detailed content of How to Control Element Wrapping in CSS Flexbox: Can I Force Flexbox to Wrap After a Specific Element?. For more information, please follow other related articles on the PHP Chinese website!