蓝桥杯 web 水果拼盘 （css3）

做题步骤：

看结构：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 中的顺序排列。