搜尋

首頁  >  問答  >  主體

如何使用 CSS 讓底部的 Flex 欄位保持項目順序?

我有一個水平居中的 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 屬性,但沒有成功。

P粉277464743P粉277464743312 天前443

全部回覆(2)我來回復

  • P粉420958692

    P粉4209586922024-03-31 10:59:39

    您需要使用 justify-content 屬性沿著主軸對齊內容(在您的情況下是垂直對齊)。您正在使用 align-items ,它定義了項目應如何沿交叉軸對齊。

    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

    回覆
    0
  • P粉269530053

    P粉2695300532024-03-31 10:25:56

    您可以使用 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

    回覆
    0
  • 取消回覆