我有一個水平居中的 Flex 項目列,從 1 到 5 排序,從容器頂部對齊,如下所示:
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>
我想讓它與容器底部對齊。我設法使用 flex-direction: column-reverse;
來做到這一點,就像下一個片段:
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>
但是,正如您所看到的,這些項目出現了故障! 有沒有辦法讓 Flex 欄位位於底部,而不需要使用 CSS 反轉項目順序? 我嘗試了迄今為止我所知道的每個 Flex 屬性,但沒有成功。
您需要使用
justify-content
屬性沿著主軸對齊內容(在您的情況下是垂直對齊)。您正在使用align-items
,它定義了項目應如何沿交叉軸對齊。您可以使用
justify-content: end;