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

css

responsive-design

flexbox

css-tricks

byAnton Shumikhin·Aug 24, 2024

Trigger line breaks in a flexbox by using display: flex and flex-wrap: wrap. Force breaks with a pseudo-element using content: '' and flex-basis: 100%. Here's a demo:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Masters say wrap it before you snap it! */
}
.flex-break::after {
  content: '';
  flex-basis: 100%; /* Boss move, forces a line break */
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-break"></div> <!-- New VIP line starts here -->
  <div class="flex-item">Item 3</div>
</div>

.flex-break is your secret sauce — place it wherever a new line is needed. This way, you have complete control of line breaks.

Smart ways to force line breaks

No need for added markup, use nth-child pseudo-class to target flex items, adjust their order property or introduce pseudo-elements with width: 100%; to act as dividers. You just hit a Two birds with one stone!

Responsive warp in FlexBox

To apply responsive wrap, use the magic of media queries:

@media (max-width: 768px) {
  .item:nth-child(2n+1)::after {
    content: '';
    flex-basis: 100%; /* Star Trek: The Next Line Is Here */
    display: none;
  }
}

This CSS wizardry forces a line break after every pair on screens narrower than 768 pixels. Bring on a screen of any size!

Playing Chess with flex-items

Employ order to change the visual order of items without disrupting your markup:

.item:first-child {
  order: 2; /* Because parents aren't always right! */
}
.item:last-child {
  order: 1; /* Youngest goes first! */
}

The order property lets you weave your magic around item positions, even do a little dance.

Browser-specific breaks: Hello Firefox!

Firefox allows you to use page-break-after or break-after to force line breaks. However, ensure this magical spell is understood by every wizard (read: browser) out there:

.item-to-break-after {
  break-after: column; /* Firefox nods in agreement, others may ignore */
}

Grain of salt: These properties are like the cool kids, they mainly hang out in the printing and multi-column world.

Embracing semantics with forced line breaks

While adding visual breaks like <hr> or <br>, ensure they conform to the structural and semantic meaning of your HTML. Also, always maintain accessible navigation:

<article class="flex-container">
  <section class="flex-item">Section 1</section>
  <div class="flex-break"></div>
  <section class="flex-item">Section 2</section>
</article>

Keeping structural semantics intact ensures screen readers and assistive technologies can make sense of your layout and offer a universally accessible website.

Cross-browser compatibility in FlexBox

Yes, cutting-edge like CSS Display Level 3 have begun to offer some exciting features for flex items. But remember, with great power comes great cross-browser inconsistencies. Use them, if you dare!

And a word for the evergreen Internet Explorer, stick to the classic properties and beware of the new-kids-on-the-block when it comes to flex items:

.flex-container {
  display: -ms-flexbox; /* IE's way of saying 'I know flexbox too!' */
  display: flex;
  -ms-flex-wrap: wrap; /* IE insists on prefix, manners you see! */
  flex-wrap: wrap;
}