Flex-box: Align last row to grid

428

I have a simple flex-box layout with a container like:

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

Now I want the items in the last row to be aligned with the other. justify-content: space-between; should be used because the width and height of the grid can be adjusted.

Currently it looks like

The item in the bottom right should be in the middle

Here, I want the item in the bottom right to be in the "middle column". What is the simplest way to accomplish that? Here is a small jsfiddle that shows this behaviour.

_x000D_
_x000D_
.exposegrid {_x000D_
  display: flex;_x000D_
  flex-flow: row wrap;_x000D_
  justify-content: space-between;_x000D_
}_x000D_
_x000D_
.exposetab {_x000D_
  width: 100px;_x000D_
  height: 66px;_x000D_
  background-color: rgba(255, 255, 255, 0.2);_x000D_
  border: 1px solid rgba(0, 0, 0, 0.4);_x000D_
  border-radius: 5px;_x000D_
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);_x000D_
  margin-bottom: 10px;_x000D_
}
_x000D_
<div class="exposegrid">_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
  <div class="exposetab"></div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

This question is tagged with css flexbox grid-layout

~ Asked on 2013-09-11 14:37:25

The Best Answer is


481

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

~ Answered on 2016-01-15 17:32:09


166

One technique would be inserting a number of extra elements (as many as the max number of elements you ever expect to have in a row) that are given zero height. Space is still divided, but superfluous rows collapse to nothing:

http://codepen.io/dalgard/pen/Dbnus

_x000D_
_x000D_
body {_x000D_
  padding: 5%;_x000D_
}_x000D_
_x000D_
div {_x000D_
  overflow: hidden;_x000D_
  background-color: yellow;_x000D_
}_x000D_
_x000D_
ul {_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
  margin: 0 -4px -4px 0;_x000D_
  list-style: none;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
li {_x000D_
  flex: 1 0 200px;_x000D_
  height: 200px;_x000D_
  border-right: 4px solid black;_x000D_
  border-bottom: 4px solid black;_x000D_
  background-color: deeppink;_x000D_
}_x000D_
li:empty {_x000D_
  height: 0;_x000D_
  border: none;_x000D_
}_x000D_
_x000D_
*,_x000D_
:before,_x000D_
:after {_x000D_
  box-sizing: border-box;_x000D_
}
_x000D_
<div>_x000D_
  <ul>_x000D_
    <li>a</li>_x000D_
    <li>b</li>_x000D_
    <li>c</li>_x000D_
    <li>d</li>_x000D_
    <li>e</li>_x000D_
    <li>f</li>_x000D_
    <li>g</li>_x000D_
    <li>h</li>_x000D_
    <li>i</li>_x000D_
    <li>j</li>_x000D_
    <li>k</li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
    <li></li>_x000D_
  </ul>_x000D_
</div>
_x000D_
_x000D_
_x000D_

In the future, this may become achievable through using multiple ::after(n).

~ Answered on 2014-02-25 15:27:20


Most Viewed Questions: