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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }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; }