Properly Sizing and Aligning the Flex Item(S) on the Last Row

Properly sizing and aligning the flex item(s) on the last row

Using flexbox, create 3 or 4 "phantom" items that always occupy the last slots.

So, for instance, user #82 is currently your last entry.

Make fake users 83, 84, 85 with visibility: hidden.

Alternatively, try just one phantom item at the end with visibility: hidden and flex-grow: 10. Target it with :last-child or :last-of-type pseudo-class.

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?

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;
}

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>

Flexbox wrap - different alignment for last row

You can try adding some left margin to push your .second element to the right:

.second {
    margin-left: auto;
}

.container {  width:100%;  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: space-between;  align-items: center;}.first {  background-color: yellow;  width: 200px;  height: 100px;}.second {  background-color: blue;  width: 200px;  height: 100px;  margin-left: auto;}

<div class="container">  <div class="first"></div>  <div class="second"></div></div>

css: flexbox last row has double the height

The problem is that, initially, .row is sized taking only the contents of .items into account. Then .items flex, and become equally wide due to flex: 1. But the contents weren't equally wide, so the longest will wrap to a second line.

It's better shown in this example:

.row {  display: inline-flex;  margin: 2px;}.item {  border: 1px solid;}.flex {  flex: 1;}

<div class="row">  <div class="item">Cell 11111</div>  <div class="item">Cell 2</div>  (before flex)</div><br /><div class="row">  <div class="item flex">Cell 11111</div>  <div class="item flex">Cell 2</div>  (after flex)</div>

Scale flexbox items in the last row to the same width with JS

Is this what you are looking for?

.wrapper {
  display: flex;
  flex-wrap: wrap;
  box-sizing : border-box;
  
}

.item {
  height: 50px;
  width:30%;
  max-width: 200px;
  background: #ababab;
  border: 2px solid #000;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Properly Sizing and Aligning the Flex Item(S) on the Last Row