Menu
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.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
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.
You don't need the table and float properties in your code. The entire layout can be made with flexbox. Here's the solution: When the screen resizes smaller than 990px, allow flex items to wrap and give the first item a 100% width, which forces the following items to the next line.
You can accomplish this by setting this on the container:
ul {
display: flex;
flex-wrap: wrap;
}
And on the child you set this:
li:nth-child(2n) {
flex-basis: 100%;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li:nth-child(4n) {
flex-basis: 100%;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>This causes the child to make up 100% of the container width before any other calculation. Since the container is set to break in case there is not enough space it does so before and after this child. So you could use an empty div element to force the wrap between the element before and after it.
=========================
Here's an article with your full list of options: https://tobiasahlin.com/blog/flexbox-break-to-new-row/
EDIT: This is really easy to do with Grid now: https://codepen.io/anon/pen/mGONxv?editors=1100
=========================
I don't think you can break after a specific item. The best you can probably do is change the flex-basis at your breakpoints. So:
ul {
flex-flow: row wrap;
display: flex;
}
li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
}
@media (min-width: 40em;){
li {
flex-basis: 30%;
}
Here's a sample: http://cdpn.io/ndCzD
============================================
EDIT: You CAN break after a specific element! Heydon Pickering unleashed some css wizardry in an A List Apart article: http://alistapart.com/article/quantity-queries-for-css
EDIT 2: Please have a look at this answer: Line break in multi-line flexbox
@luksak also provides a great answer
There is part of the spec that sure sounds like this... right in the "flex layout algorithm" and "main sizing" sections:
Otherwise, starting from the first uncollected item, collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size, or until a forced break is encountered. If the very first uncollected item wouldn’t fit, collect just it into the line. A break is forced wherever the CSS2.1 page-break-before/page-break-after [CSS21] or the CSS3 break-before/break-after [CSS3-BREAK] properties specify a fragmentation break.
From http://www.w3.org/TR/css-flexbox-1/#main-sizing
It sure sounds like (aside from the fact that page-breaks ought to be for printing), when laying out a potentially multi-line flex layout (which I take from another portion of the spec is one without flex-wrap: nowrap) a page-break-after: always or break-after: always should cause a break, or wrap to the next line.
.flex-container {
display: flex;
flex-flow: row wrap;
}
.child {
flex-grow: 1;
}
.child.break-here {
page-break-after: always;
break-after: always;
}
However, I have tried this and it hasn't been implemented that way in...
It does work the way it sounds (to me, at least) like in:
Sample at http://codepen.io/morewry/pen/JoVmVj.
I didn't find any other requests in the bug tracker, so I reported it at https://code.google.com/p/chromium/issues/detail?id=473481.
But the topic took to the mailing list and, regardless of how it sounds, that's not what apparently they meant to imply, except I guess for pagination. So there's no way to wrap before or after a particular box in flex layout without nesting successive flex layouts inside flex children or fiddling with specific widths (e.g. flex-basis: 100%).
This is deeply annoying, of course, since working with the Firefox implementation confirms my suspicion that the functionality is incredibly useful. Aside from the improved vertical alignment, the lack obviates a good deal of the utility of flex layout in numerous scenarios. Having to add additional wrapping tags with nested flex layouts to control the point at which a row wraps increases the complexity of both the HTML and CSS and, sadly, frequently renders order useless. Similarly, forcing the width of an item to 100% reduces the "responsive" potential of the flex layout or requires a lot of highly specific queries or count selectors (e.g. the techniques that may accomplish the general result you need that are mentioned in the other answers).
At least floats had clear. Something may get added at some point or another for this, one hopes.
Setting a min-width on child elements will also create a breakpoint. For example breaking every 3 elements,
flex-grow: 1;
min-width: 33%;
If there are 4 elements, this will have the 4th element wrap taking the full 100%. If there are 5 elements, the 4th and 5th elements will wrap and take each 50%.
Make sure to have parent element with,
flex-wrap: wrap
The only thing that appears to work is to set flex-wrap: wrap; on the container and them somehow make the child you want to break out after to fill the full width, so width: 100%; should work.
If, however, you can't stretch the element to 100% (for example, if it's an <img>), you can apply a margin to it, like width: 50px; margin-right: calc(100% - 50px).
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