Wrapping Flex Items in The Last Row

Flex-box: Align last row to grid

Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

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?

How to wrap last row of flexbox with space-around?

You could try CSS :last-child as in the example below to use different style in your last div.

.flexbox {  display: flex;  flex-flow: column;}
.flex-child {  background: red;  align-content: center;  align-self: center;}
.flex-child:last-child {  align-content: space-around;  align-self: flex-start;}

<div class="flexbox">  <div class="flex-child">    one  </div>  <div class="flex-child">    two  </div>  <div class="flex-child">    three  </div></div>

How to display wrapping flex items as space-between with last row aligned left?

After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. Any by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.

There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.

How to keep wrapped flex-items the same width as the elements on the previous row?

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

Prevent flex items in the last row becoming larger than other flex items

Adding invisible flex items is the most popular way to go. It keeps all the flex good stuff and is a hack that makes clear sense.

.hidden-flex-item {
    content: "";
    flex: 1 0 200px;
    padding: 5px;     
    margin-top: 10px;  
    margin-right: 5px;
    visibility: hidden;
}

Fiddle here: https://jsfiddle.net/px37t2jc/9/

Css grid can also handle this sort of issue easily if you take the time to learn it.

Inconsistent flex-grow in last row with flex-wrap

The flex grow and shrink factors are basically used to Resolve Flexible Lengths. But that happens independently for each flex line (row or column).

To resolve the flexible lengths of the items within a flex line: [...]

• If using the flex grow factor

  Find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the
  item’s target main size to its flex base size plus a fraction of the
  remaining free space proportional to the ratio.

• If using the flex shrink factor

  For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex
  shrink factor. Find the ratio of the item’s scaled flex shrink factor
  to the sum of the scaled flex shrink factors of all unfrozen items on
  the line. Set the item’s target main size to its flex base size minus
  a fraction of the absolute value of the remaining free space
  proportional to the ratio.

The CSS Working Group is aware of this problem and plans to introduce some way to fix it in Flexbox Level 2

Solve the “items on the last line get way too big when you're flexing”
problem. More generally, “make items have a consistent flexed size,
regardless of how much extra space is on each line”.

• Possible solution - fill out the last line with “phantom copies” of the last item, flex with them in, then remove them.
• Possible solution - calculate minimum values of 1fr and alignment free space across the entire flexbox (instead of per-line) and use
  that.

Flex Box Last Row element

I need even space

Then use margin. Here's a combination with calc().

Simple math: 100% of full width - (3 elements in the row with the left and right margin, ergo, 6) divided by 3.

* {  box-sizing: border-box;  margin: 0;  padding: 0;}
*:after,*:before {  box-sizing: border-box;}
.flex-container {  display: flex;  flex-wrap: wrap;  flex-direction: row;}
.flex-container div {  flex-basis: calc((100% - 6%)/3);  margin: 1%;  border: 1px solid #ccc;  padding: 10px;}

<div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div>

---

Related Topics