蓝桥杯Web组省赛

1.水果拼盘（5分）

初始效果如下图，想要通过flex布局，将相同颜色的水果放在相同颜色的圆盘正中间

修改对应的css代码

flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-direction属性决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿

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

最终效果