Block grid starting at the bottom right

Question

I am looking for a good CSS way to get an unordered list that always ends in the lower right. For instance:

      ||  1  ||   2 
  3   ||  4  ||   5

In a regular block grid, I use floating list items. I looked at flexbox for a solution, but didn't come up with anything nice.

Adding one item to this list will result in the following list:

  1   ||  2  ||   3 
  4   ||  5  ||   6

Will be another

      ||     ||   1
  2   ||  3  ||   4 
  5   ||  6  ||   7

Answer 1

You can use flexbox with flex-wrap: wrap-reverseand flex-direction: row-reverse. You can add as many additional elements as you want. (note: I left the default container height)

  * {
  box-sizing: border-box;
  }
  .x {
    width: 302px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    border: 1px solid red;
    flex-grow: 0;
    flex-basis: 0%;
  }
  .y {
    width: 100px;
    height: 100px;
    border: 1px solid green;
  }

<div class="x">
  <div class="y">1</div>
  <div class="y">2</div>
  <div class="y">3</div>
  <div class="y">4</div>
  <div class="y">5</div>
</div>

Run codeHide result

Answer 2

"" flexbox margin.

:

margin-left: auto;

, ? : http://codepen.io/powaznypowazny/pen/ZLdBxa

Answer 3

, . , , . , .

, float:right, , .

parent {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  min-height: 100vh;          /* desired height */
  align-items: flex-end;
  align-content: flex-start;
}
child {
  flex: 1 0 33.3333%;
  max-width: 33.3333%;

  /* below mostly styling, not part of the layout solution */
  text-align: center;
  box-sizing: border-box;
  padding: 1rem;
  border: 2px solid white;
  background-color: #eee;
}

body {margin: 0;}

<parent>
    <child> 1 </child>
    <child> 2 </child>
    <child> 3 </child>
    <child> 4 </child>
    <child> 5 </child>
  </parent>

Hide result