CSS控制圖片顯示順序

在CSS中，我們可以使用flex布局或者grid布局來(lái)控制圖片從上到下的顯示。

1、flex布局

我們可以將圖片放入一個(gè)flex容器中，并通過(guò)設(shè)置flex-direction屬性為column來(lái)實(shí)現(xiàn)從上到下的顯示。

.container {
  display: flex;
  flex-direction: column;
}
.container img {
  width: 100px;
  height: 100px;
}

2、grid布局

我們也可以將圖片放入一個(gè)grid容器中，并通過(guò)設(shè)置grid-template-columns屬性來(lái)控制圖片的顯示順序。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.container img {
  width: 100px;
  height: 100px;
}

在以上的代碼中，我們分別使用了flex布局和grid布局來(lái)控制圖片從上到下的顯示，在flex布局中，我們?cè)O(shè)置了flex-direction屬性為column來(lái)實(shí)現(xiàn)；而在grid布局中，我們?cè)O(shè)置了grid-template-columns屬性來(lái)控制圖片的顯示順序，無(wú)論使用哪種布局，都可以實(shí)現(xiàn)圖片從上到下的顯示。