How to let a Flex column on the bottom keeping the items order using CSS?

November 4, 2022

I have a horizontally centered column of Flex items ordered from 1 to 5 that are aligned from the top of the container like this:

body, html {
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.container {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-end;
  align-content: center;
  width: 100%;
  height: 100%;
  background: pink;
}
.item {
  margin: 1px;
  width: 30px;
  height: 30px;
  background: green;
}

<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>

I would like to let it aligned by the bottom of the container instead. I manage to do it with flex-direction: column-reverse; like in the next Snippet:

body, html {
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.container {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: flex-end;
  align-content: center;
  width: 100%;
  height: 100%;
  background: pink;
}
.item {
  margin: 1px;
  width: 30px;
  height: 30px;
  background: green;
}

<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>

However, as you see, the items get out of order! Is there a way to let a flex column on the bottom without reversing the items order using CSS? I tried every Flex property that I know so far without success.

>Solution :

You can use justify-content: end;

.container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.content {
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

<div class="container">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content">5</div>
</div>