16 August 2024

To force the next flex item to go to a new line in a CSS flex container, you can use the break-after property.

Values for break-after

  1. auto: This is the default value. It allows the browser to handle breaks according to its default behavior.
  2. always: Forces a break after the element. In a multi-column layout, this will ensure that the next content starts in a new column. In print styles, this will start a new page.
  3. avoid: Prevents a break from occurring after the element if possible. The content will try to remain on the same page or column.
  4. left: In print layouts, this forces a page break before the element starts, ensuring that the element will start on a new odd-numbered (right) page if the content was already on a left page.
  5. right: In print layouts, this forces a page break before the element starts, ensuring that the element will start on a new even-numbered (left) page if the content was already on a right page.
  6. column: Forces a column break after the element in a multi-column layout, ensuring the next content starts in a new column.
  7. none: This is similar to auto and allows the default behavior without forcing or avoiding any breaks.

Source code viewer
  1. <style>
  2. .container {
  3.   display: flex;
  4.   flex-wrap: wrap;
  5. }
  6.  
  7. .item {
  8.   flex: 1;
  9. }
  10.  
  11. .new-line {
  12.   break-after: column; /* Forces a break after this item */
  13. }
  14. </style>
  15. <div class="container">
  16.   <div class="item">Item 1</div>
  17.   <div class="item">Item 2</div>
  18.   <div class="item new-line">Item 3 (New line)</div>
  19.   <div class="item">Item 4</div>
  20. </div>
Programming Language: HTML