做題步驟：

看結構：html 、css 、f12?

分析: f12 查看元素，你會發現水果的高度剛好和拼盤的高度一樣，每一種水果的盤子剛好把頁面填滿了，所以咱們就只要讓元素豎著排列，加上是豎著，排不下的換行，就剛好能讓每種元素都在盤子里

---

牛逼的答案：

#pond {flex-flow: column wrap;
}

?flex-flow 是 flex-direction 和 flex-wrap 的簡寫形式：

• flex-direction: column;：子元素按列排列（垂直方向）。
• flex-wrap: wrap;：如果子元素在當前列中無法容納，則會換到下一列。

---

通俗易懂的答案：

#pond {display: flex;flex-direction: column;flex-wrap: wrap;
}

---

類似的題目：省模擬賽 水果擺盤

.yellow {align-self: flex-end;order: 1;
}

1.?align-self: flex-end;

• 作用：單獨設置該元素在交叉軸上的對齊方式。
• 具體行為：
  • 如果父容器的主軸是水平方向（默認?flex-direction: row），則?align-self: flex-end;?表示該元素會在垂直方向上與交叉軸的終點對齊（即靠下對齊）。
  • 如果父容器的主軸是垂直方向（flex-direction: column），則?align-self: flex-end;?表示該元素會在水平方向上與交叉軸的終點對齊（即靠右對齊）。
• 覆蓋父級規則：align-self?會覆蓋父容器的?align-items?屬性對該元素的影響。

2.?order: 1;

• 作用：設置該元素在主軸上的排列順序。
• 具體行為：
  • 默認情況下，所有 flex 子項的?order?值為?0，表示它們按照 HTML 中的順序排列。
  • 設置?order: 1;?后，該元素會被放置在所有?order?值小于或等于?0?的元素之后。
  • 如果多個元素有相同的?order?值，則它們仍然按照 HTML 中的順序排列。