Bagaimanakah saya boleh membuat lajur Flex bahagian bawah mengekalkan susunan item menggunakan CSS?

Question

Saya mempunyai lajur item Flex berpusat mendatar, diisih dari 1 hingga 5, dijajarkan dari bahagian atas bekas, seperti ini:

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>

Saya mahu ia sejajar dengan bahagian bawah bekas. Saya berjaya melakukan ini menggunakan flex-direction: column-reverse; seperti dalam coretan seterusnya:

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>

Tetapi, seperti yang anda boleh lihat, barang-barang ini bermasalah! Adakah terdapat cara untuk mempunyai lajur Flex di bahagian bawah tanpa membalikkan susunan item menggunakan CSS? Saya mencuba setiap hartanah Flex yang saya tahu setakat ini tidak berjaya.

Answer 1

Anda perlu menggunakan justify-content 属性沿主轴对齐内容（在您的情况下是垂直对齐）。您正在使用 align-items , yang mentakrifkan cara item harus dijajarkan di sepanjang paksi silang.

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

   
1
   
2
   
3
   
4
   
5

Answer 2

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

  
1
  
2
  
3
  
4
  
5