CODEWITHSUNDEEP
htmlcssflexbox
user519477
user519477

Reputation:

Aligning elements in last flexbox row

I know this question has been asked several times here, but unfortunately, none of the solutions really works and maybe there's a better way of achieving what I need in the meanwhile.

So, given the following code, you will see that the first row fits 6 elements and the second row fits 2.

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}
<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

What I would like to achieve is have the elements of the first row fill the space as in the code, but the elements in the second row should line up based on the first line.

Using an after pseudo-element with flex: auto like in the following code will screw up the spacing between the two elements in the last row.

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnails::after {
  content: "";
  flex: auto;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}
<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

So does flex-grow: 1: 

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnails::after {
  content: "";
  flex-grow: 1;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}
<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

And so does margin-right: auto:

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnails::after {
  content: "";
  margin-right: auto;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}
<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

Is there any other way I can achieve what I need than to use dummy elements or fixed margins between the items?

I would like to remain flexible because I don't know how many items will be available and what size they have.

Upvotes: 2

Views: 1215

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372059

It appears you've covered most, if not all, methods for last-row alignment available in current flexbox.

Hopefully, a future iteration of the spec will include alignment properties such as last-row, last-column, only-child-in-a-row, etc.

In the meanwhile, we need to hack it with the methods you've listed.

There are also these options to consider: (The second option is mostly FYI, as most browsers haven't completed implementation.)

  • Desandro Masonry

    Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

    source: http://masonry.desandro.com/

  • CSS Grid Layout Module Level 1

    This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

    source: https://drafts.csswg.org/css-grid/

Upvotes: 3

Related Questions