* {
margin: 0;
padding: 0;
}
.cnt {
display: flex;
margin: 50px;
background: #ffff00;
justify-content: space-between;
flex-wrap: wrap;
}
.cnt div {
width: 100px;
height: 100px;
background: #999;
margin: 10px;
}
.cnt::after {
content: '';
width: 100%;
}
.flex-item:nth-child(6) {
order: 1;
}<div class="cnt">
<div class="flex-item one"></div>
<div class="flex-item two"></div>
<div class="flex-item three"></div>
<div class="flex-item four"></div>
<div class="flex-item five"></div>
<div class="flex-item six"></div>
</div>The issue at hand is my inability to break lines whenever I want. Is there a way for me to dictate where the line should break? For instance, if I wish to create a line break after the .two class, how can this be achieved?
Amendment:
I've realized my mistake. This is indeed how you can set up line breaks. You just need to designate which items should appear on the next line by changing their order. Of course, this can only be done once.
To break the line after the second box, you must assign the .three, .four, .five, and .six classes to order: 1. Check out this example: https://jsfiddle.net/r33muub3/4/
I adjusted the justify-content to left for better visibility.