Move last element to next line in a flex container
Apply flex-wrap
to the container.
Apply flex: 1 0 33%
to the first three child divs.
To the fourth div apply flex-basis: 100%; display: flex
.
To the children of the fourth div apply flex: 1 0 33%
.
The idea is to force the fourth item to wrap, then have its children replicate the behavior of the children in the primary container.
Flexbox item wrap to a new line
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>
How to specify line breaks in a multi-line flexbox layout?
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>
Targeting flex items on the last or specific row
Unfortunately, in the current iteration of flexbox (Level 1), there is no clean way to solve the last-row alignment problem. It's a common problem.
It would be useful to have a flex property along the lines of:
last-row
last-column
only-child-in-a-row
alone-in-a-column
This problem does appear to be a high priority for Flexbox Level 2:
- CSS Working Group Wiki - Specification Issues and Planning
- https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html
Although this behavior is difficult to achieve in flexbox, it's simple and easy in CSS Grid Layout:
- Equal width flex items even after they wrap
In case Grid is not an option, here's a list of similar questions containing various flexbox hacks:
- Properly sizing and aligning the flex item(s) on the last row
- Flex-box: Align last row to grid
- Flexbox wrap - different alignment for last row
- How can a flex item keep the same dimensions when it is forced to a new row?
- Selector for an element alone in a row?
- Aligning elements in last flexbox row
- How can I allow flex-items to grow while keeping the same size?
- Left-align last row of flexbox using space-between and margins
- Inconsistent margin between flex items on last row
- How to keep wrapped flex-items the same width as the elements on the previous row?
- How to align left last row/line in multiple line flexbox
- Last children of grid get giant gutter cause of flexbox space-between
- Managing justify-content: space-between on last row
- Flexbox space between behavior combined with wrap
- Possible to use CSS Flexbox to stretch elements on every row while maintaining consistent widths?
Force flex item to span full row width
When you want a flex item to occupy an entire row, set it to width: 100%
or flex-basis: 100%
, and enable wrap
on the container.
The item now consumes all available space. Siblings are forced on to other rows.
.parent {
display: flex;
flex-wrap: wrap;
}
#range, #text {
flex: 1;
}
.error {
flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
border: 1px dashed black;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message (takes full width)</label>
</div>
Related Topics
How to Avoid Line Breaks After ":Before" in CSS
Shiny Dashboadpage Lock Dashboardheader on Top
How to Change The Color of Bootstrap Checkbox
Targeting Specific Column in Table
Is There Any Media Query for Non-Retina Display
How to Make an Svg Masked Image Compatible with Internet Explorer
How to Show Md-Toast with Background Color
Popover Gets Hidden Under The Nav Bar in Twitter Bootstrap
Web Fonts and Providing Fallback Fonts
Remove The Random String Appended to Sprite Filename with Compass/Sass
How to Change CSS When It's Ng-Disabled
CSS Center Image in a Clipped Parent Div