0

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.

L777
  • 7,719
  • 3
  • 38
  • 63

2 Answers2

1

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>
Cédric
  • 2,239
  • 3
  • 10
  • 28
1

You need to use the justify-content property to align content along the main axis (in your case vertically). You are using align-items which defines how the items should be aligned along the cross axis.

body, html {
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.container {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: 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>
philale
  • 437
  • 4
  • 15
  • Thanks for the clarifying info! I accepted the other post as the correct answer since it came first, however your's have useful content that makes me understand the reason of it; If I could I would have accepted both. – L777 Nov 04 '22 at 14:36