蓝桥杯前端Web赛道-水果拼盘

蓝桥杯前端Web赛道-水果拼盘

题目链接：1.水果拼盘 - 蓝桥云课 (lanqiao.cn)

先看题目要求：

首先我们根据题目提示可以知道这道题需要使用flex布局，所以我们在提示的位置先写上

display:flex

我们通过观察题目发现现在的水果都是横向排列的，所以我们需要把水果竖着排，于是我们可以这样写

flex-direction: column;

然后变成了这样，为什么会出现这种情况呢？

刚刚的代码实际上是改变了整个页面的主轴，默认的主轴是row也就是说按行来排的，简单用图片表示就是这样

当我们使用flex-direction: column;后 把排列方式变成以列来排

用图来画大概是这样的

那么为什么水果们都变小了呢？原因是flex布局里，默认是不换行的，由于flex布局的特殊性，当空间不够的时候，它就会自动缩小空间里的盒子，让它们弹性的变化，在不改变盒子占用空间的比例的情况下来适应现在的空间

所以最后一步，我们只需要设置换行则可以达到题目要求

  flex-wrap: wrap;

完整代码

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

另外推荐大家去看阮一峰老师编写的关于flex布局的教程，非常详细 Flex 布局教程：语法篇