2022蓝桥杯web省赛题解-01

2022蓝桥杯web省赛题解01

完整代码见GitHub：github.com/Veilhry/lanqiaoweb/tree/master/01

大学组第一题

水果拼盘

• 介绍：目前CSS3中新增的Flex弹性布局已经成为前端页面布局的首选方案，本题可以使用Flex属性快速完成布局。
  预览的效果如下

目标
建议使用flex相关属性完成css/style.css 中的TODO部分。

1. 禁止修改圆盘的位置和图片的大小。
2. 相同颜色的水果放在相同颜色的圆盘正中间（例如:苹果是红色的就放在
   红色的圆盘里)。

完成后页面如下

题解

整个就是一个经典flex布局，换行的实现通过使用flex-direction以及flex-wrap两个属性来控制flex布局的主轴方向以及是否换行，当然这两个属性可以合在一起写成flex-flow

/* TODO：待补充代码 */
#pond {
  display: flex;
  flex-flow: column wrap;
}