Menu
There is a flexbox grid.
.flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; }<div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item new-string"></div> </div>How to transfer .new-string to a new line, along with the elements that follow it?
384
Inserting a line-breaking flex itemUsing an element to break to a new flex row comes with an interesting effect: we can skip specifying the width of any item in our flex layout and rely completely on the line breaks to define the flow of our grid.
Making things wrap If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.
nowrap. The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending on the flex-direction value. This is the default value.
As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.
If you look at this great answer you'll notice that the only cross-browser way (without 2 line break limit) is inserting 100%-width empty blocks ("line-breaks"). So for similar markup this will look like
.flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } .line-break { width: 100%; }<div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="line-break"></div> <div class="item"></div> <div class="item"></div> <div class="line-break"></div> <div class="item"></div> <div class="line-break"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>If you want to preserve your markup style, you'll have to insert this line-break blocks via JavaScript:
var items = document.querySelectorAll(".flex > .item.new-string"); for (var i = 0; i < items.length; i++) { var lineBreak = document.createElement('div'); lineBreak.className = "line-break"; items[i].parentNode.insertBefore(lineBreak, items[i]); }.flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } .line-break { width: 100%; }<div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item new-string"></div> <div class="item"></div> <div class="item new-string"></div> <div class="item new-string"></div> <div class="item"></div> <div class="item"></div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
