Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
622 views
in Technique[技术] by (71.8m points)

html - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...