How to specify line breaks in a multi-line flexbox layout?

flex item new row
flex-layout wrap
flex-row
flex-wrap not working
bootstrap flex new line
flex-basis
flex-wrap space between rows
bootstrap flex break line

Is there a way to make a line break in multiple line flexbox?

For example to break after each 3rd item in this CodePen.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) {
  background: silver;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%), they will force a line break.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

Breaking to a new row with flexbox, Or is there a way of just telling flexbox to line break at certain points? a flex container with display: flex and flex-wrap: wrap and that the flex our flex layout and rely completely on the line breaks to define the flow of our grid. Inserting a line-breaking flex item. Using 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. Let’s start with a simple example.

From my perspective it is more semantic to use <hr> elements as line breaks between flex items.

.container {
  display: flex;
  flex-flow: wrap;
}

.container hr {
  width: 100%;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...
</div>

Flexbox, The flex-wrap property is a sub-property of the Flexible Box Layout If set to multiple lines, it also defines the cross-axis which determines the  That means you can only force 2 line breaks. To solve that, you can generate the pseudo-elements inside the flex items instead of in the flex container. This way you won’t be limited to 2. But those pseudo-elements won’t be flex items, so they won’t be able to force line breaks.

@Oriol has an excellent answer, sadly as of October 2017, neither display:contents, neither page-break-after is widely supported, better said it's about Firefox which supports this but not the other players, I have come up with the following "hack" which I consider better than hard coding in a break after every 3rd element, because that will make it very difficult to make the page mobile friendly.

As said it's a hack and the drawback is that you need to add quite a lot of extra elements for nothing, but it does the trick and works cross browser even on the dated IE11.

The "hack" is to simply add an additional element after each div, which is set to display:none and then used the css nth-child to decide which one of this should be actually made visible forcing a line brake like this:

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n-1) {
  background: silver;
}
.breaker {display:none;}
.breaker:nth-child(3n) {
  display:block;
  width:100%;
  height:0;
 }
<div class="container">
  <div class="item">1</div><p class=breaker></p>
  <div class="item">2</div><p class=breaker></p>
  <div class="item">3</div><p class=breaker></p>
  <div class="item">4</div><p class=breaker></p>
  <div class="item">5</div><p class=breaker></p>
  <div class="item">6</div><p class=breaker></p>
  <div class="item">7</div><p class=breaker></p>
  <div class="item">8</div><p class=breaker></p>
  <div class="item">9</div><p class=breaker></p>
  <div class="item">10</div><p class=breaker></p>
</div>

flex-wrap, For the columns to break to multiple lines, you'll need to give .row the flexbox property and value that will make it a multi-line flex container. I have a multi-line flexbox layout where I would like to specify the height of one of the rows and have the remaining rows stretch to fill. If I set the height of the blue div below, I get a bunch

You want a semantic linebreak?

Then consider using <br>. W3Schools may suggest you that BR is just for writing poems (mine is coming soon) but you can change the style so it behaves as a 100% width block element that will push your content to the next line. If 'br' suggests a break then it seems more appropriate to me than using hr or a 100% div and makes the html more readable.

Insert the <br> where you need linebreaks and style it like this.

 // Use `>` to avoid styling `<br>` inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }

You can disable <br> with media queries, by setting display: to block or none as appropriate (I've included an example of this but left it commented out).

You can use order: to set the order if needed too.

And you can put as many as you want, with different classes or names :-)

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <br class="linebreak1"/>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

How do I create a multiple line layout using flexbox?, Analyze CSS; Maximize CSS Editor; Minimize CSS Editor; Fold All; Unfold All. xxxxxxxxxx. 37. 1. section{. 2. display: flex;. 3. flex-flow: row wrap;. 4. } 5. break{. 6​. All flex items are set by default to order: 0. This means they will be laid out in the order they appear in the source code. If you give the last item order: 1, this forces it to be last when additional items are added. The ::before and ::after pseudo elements on a flex container create new flex items.

I think the traditional way is flexible and fairly easy to understand:

Markup

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

Create grid.css file:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

I've created an example (jsfiddle)

Try to resize the window under 400px, it's responsive!!

Flexbox line break, Breaking a line in desired place with flexbox. Does not work too well 2. display: flex;. 3. flex-flow: row wrap;. 4. } 5. break{. 6. flex-basis: 100%;. 7. width: 0px;. 8. Multi-line flex containers with flex-wrap. While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

html, line break in multiple line flexbox? For example to break after each 3rd item in this CodePen. .container { background: tomato; display: flex; flex-flow: row wrap;​  The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in.

Mastering Wrapping of Flex Items, Flexbox was designed as a single dimensional layout, meaning that it deals There is however the ability to wrap flex items onto new lines, creating This means that if you have a set of flex items that are too wide for their  Took my quite a while to find this, because it’s hardly mentioned anywhere except as a note on the Mozilla Developer Network:. When you are using a flexbox layout in multi-line mode (e.g. the ‘flex-wrap’ property is set to wrap), you can force flex items to start on a new line by setting the ‘page-break-before’ property.

CSS Quick Tip: Line Breaks in Flexbox Multi-line mode – Articles, When you are using a flexbox layout in multi-line mode (e.g. the 'flex-wrap' property is set to wrap), you can force flex items to start on a new  There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.

Comments
  • I had the same or very similar problem; I wanted to break every 4th item so I just set the width of each flex item to 25vw (or 25%). So in your case, for every 3rd item you would use 33.3vw (or 33.3%). Worked perfectly for what I wanted. Might help someone else if they are looking for a simpler method.
  • Ben Clarke! Thank you so much! Your answer is the only one that worked. You could consider adding it as an answer. :-)
  • Related: stackoverflow.com/q/4609279/405017
  • @Oriol About the first approach, why you say it is ugly and not semantic? Just curious.
  • @nacho4d Because HTML should not be modified for styling purposes. And if you change your mind and decide you want 4 columns instead of 3, you would need to modify maybe lots of HTML. Compare with the break-after solution, which would only require modifying a selector in the stylesheet.
  • I needed to add display: block; to the .container ::before and ::after pseudo classes to make solution number two work in IE. YMMV!
  • @twined That's strange, because flex items should be blockified automatically.
  • Since the page-break thing was apparently removed from the spec, is it possible to get your second snippet running in the column direction and not have it expand the height of its container? I didn't have any luck and setting flex-basis to 100% / items stretches its height.
  • This is how I do it too, works great. Adding hr { flex-basis: 100%; height: 0; margin: 0; border: 0; } makes the break seamless.
  • I like this approach. Note: when using gap: 10px; the distance between rows is actually 20px. To address, specify a row gap of half that size: gap: 5px 10px;.
  • @Besworks: border should be set to none, instead of 0
  • @mark, border:0; is just as valid as border:none;. See: stackoverflow.com/questions/2922909/…
  • I also found that the "display:contents" and "page-break-after" methods are not working, and resorted to this "hack." This was reported as a Chrome bug, and marked as "WontFix" (see bugs.chromium.org/p/chromium/issues/detail?id=473481) with the explanation: "There is, according to the CSS Working Group, no current way to force a line break in a flex box with CSS."