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 {_x000D_
background: tomato;_x000D_
display: flex;_x000D_
flex-flow: row wrap;_x000D_
align-content: space-between;_x000D_
justify-content: space-between;_x000D_
}_x000D_
.item {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: gold;_x000D_
border: 1px solid black;_x000D_
font-size: 30px;_x000D_
line-height: 100px;_x000D_
text-align: center;_x000D_
margin: 10px;_x000D_
}_x000D_
.item:nth-child(3n) {_x000D_
background: silver;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="item">1</div>_x000D_
<div class="item">2</div>_x000D_
<div class="item">3</div>_x000D_
<div class="item">4</div>_x000D_
<div class="item">5</div>_x000D_
<div class="item">6</div>_x000D_
<div class="item">7</div>_x000D_
<div class="item">8</div>_x000D_
<div class="item">9</div>_x000D_
<div class="item">10</div>_x000D_
</div>
_x000D_
Like
.item:nth-child(3n){
/* line-break: after; */
}
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!!
From my perspective it is more semantic to use <hr>
elements as line breaks between flex items.
.container {_x000D_
display: flex;_x000D_
flex-flow: wrap;_x000D_
}_x000D_
_x000D_
.container hr {_x000D_
width: 100%;_x000D_
}
_x000D_
<div class="container">_x000D_
<div>1</div>_x000D_
<div>2</div>_x000D_
<hr>_x000D_
<div>3</div>_x000D_
<div>2</div>_x000D_
..._x000D_
</div>
_x000D_
Tested in Chrome 66, Firefox 60 and Safari 11.
For future questions, It's also possible to do it by using float
property and clearing it in each 3 elements.
Here's an example I've made.
.grid {_x000D_
display: inline-block;_x000D_
}_x000D_
_x000D_
.cell {_x000D_
display: inline-block;_x000D_
position: relative;_x000D_
float: left;_x000D_
margin: 8px;_x000D_
width: 48px;_x000D_
height: 48px;_x000D_
background-color: #bdbdbd;_x000D_
font-family: 'Helvetica', 'Arial', sans-serif;_x000D_
font-size: 14px;_x000D_
font-weight: 400;_x000D_
line-height: 20px;_x000D_
text-indent: 4px;_x000D_
color: #fff;_x000D_
}_x000D_
_x000D_
.cell:nth-child(3n) + .cell {_x000D_
clear: both;_x000D_
}
_x000D_
<div class="grid">_x000D_
<div class="cell">1</div>_x000D_
<div class="cell">2</div>_x000D_
<div class="cell">3</div>_x000D_
<div class="cell">4</div>_x000D_
<div class="cell">5</div>_x000D_
<div class="cell">6</div>_x000D_
<div class="cell">7</div>_x000D_
<div class="cell">8</div>_x000D_
<div class="cell">9</div>_x000D_
<div class="cell">10</div>_x000D_
</div>
_x000D_
I just want to throw this answer in the mix, intended as a reminder that – given the right conditions – you sometimes don't need to overthink the issue at hand. What you want might be achievable with flex: wrap
and max-width
instead of :nth-child
.
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 420px;
list-style-type: none;
background-color: tomato;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
background-color: #ccc;
border: 1px solid #333;
width: 23px;
height: 23px;
text-align: center;
font-size: 1rem;
line-height: 1.5;
margin: 0.2rem;
flex-shrink: 0;
}
_x000D_
<div class="root">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
_x000D_
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 {_x000D_
background: tomato;_x000D_
display: flex;_x000D_
flex-flow: row wrap;_x000D_
justify-content: space-between;_x000D_
}_x000D_
.item {_x000D_
width: 100px;_x000D_
background: gold;_x000D_
height: 100px;_x000D_
border: 1px solid black;_x000D_
font-size: 30px;_x000D_
line-height: 100px;_x000D_
text-align: center;_x000D_
margin: 10px_x000D_
}_x000D_
_x000D_
.container > br_x000D_
{_x000D_
width: 100%;_x000D_
content: '';_x000D_
}_x000D_
_x000D_
// .linebreak1 _x000D_
// { _x000D_
// display: none;_x000D_
// }_x000D_
_x000D_
// @media (min-width: 768px) _x000D_
// {_x000D_
// .linebreak1_x000D_
// {_x000D_
// display: block;_x000D_
// }_x000D_
// }
_x000D_
<div class="container">_x000D_
<div class="item">1</div>_x000D_
<div class="item">2</div>_x000D_
<br class="linebreak1"/>_x000D_
<div class="item">3</div>_x000D_
<div class="item">4</div>_x000D_
<div class="item">5</div>_x000D_
<div class="item">6</div>_x000D_
<div class="item">7</div>_x000D_
<div class="item">8</div>_x000D_
<div class="item">9</div>_x000D_
<div class="item">10</div>_x000D_
</div>
_x000D_
No need to limit yourself to what W3Schools says:
@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;
}
_x000D_
<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>
_x000D_
.container {_x000D_
background: tomato;_x000D_
display: flex;_x000D_
flex-flow: row wrap;_x000D_
align-content: space-between;_x000D_
justify-content: space-between;_x000D_
}_x000D_
_x000D_
.item {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: gold;_x000D_
border: 1px solid black;_x000D_
font-size: 30px;_x000D_
line-height: 100px;_x000D_
text-align: center;_x000D_
margin: 10px;_x000D_
}
_x000D_
<div class="container">_x000D_
<div>_x000D_
<div class="item">1</div>_x000D_
<div class="item">2</div>_x000D_
<div class="item">3</div>_x000D_
</div>_x000D_
<div>_x000D_
<div class="item">4</div>_x000D_
<div class="item">5</div>_x000D_
<div class="item">6</div>_x000D_
</div>_x000D_
<div>_x000D_
<div class="item">7</div>_x000D_
<div class="item">8</div>_x000D_
<div class="item">9</div>_x000D_
</div>_x000D_
<div class="item">10</div>_x000D_
</div>
_x000D_
you could try wrapping the items in a dom element like here. with this you dont have to know a lot of css just having a good structure will solve the problem.
Another possible solution that doesn't require to add any extra markup is to add some dynamic margin to separate the elements.
In the case of the example, this can be done with the help of calc()
, just adding margin-left
and margin-right
to the 3n+2 element (2, 5, 8)
.item:nth-child(3n+2) {
background: silver;
margin: 10px calc(50% - 175px);
}
Snippet Example
.container {_x000D_
background: tomato;_x000D_
display: flex;_x000D_
flex-flow: row wrap;_x000D_
align-content: space-between;_x000D_
justify-content: space-between;_x000D_
}_x000D_
.item {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: gold;_x000D_
border: 1px solid black;_x000D_
font-size: 30px;_x000D_
line-height: 100px;_x000D_
text-align: center;_x000D_
margin: 10px;_x000D_
}_x000D_
.item:nth-child(3n+2) {_x000D_
background: silver;_x000D_
margin: 10px calc(50% - 175px);_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="item">1</div>_x000D_
<div class="item">2</div>_x000D_
<div class="item">3</div>_x000D_
<div class="item">4</div>_x000D_
<div class="item">5</div>_x000D_
<div class="item">6</div>_x000D_
<div class="item">7</div>_x000D_
<div class="item">8</div>_x000D_
<div class="item">9</div>_x000D_
<div class="item">10</div>_x000D_
</div>
_x000D_
I tried several answers here, and none of them worked. Ironically, what did work was about the simplest alternative to a <br/>
one could attempt:
<div style="flex-basis: 100%;"></div>
or you could also do:
<div style="width: 100%;"></div>
Place that wherever you want a new line. It seems to work even with adjacent <span>
's, but I'm using it with adjacent <div>
's.
Source: Stackoverflow.com