web蓝桥杯2022省赛真题：水果拼盘

代码及注释：

/* TODO：待补充代码 */
#pond {
  display: flex;        //flex布局
  flex-direction: column;      //主轴方向从上到下
  flex-wrap: wrap;      //子元素换行
}

知识点：

flex弹性布局

父元素：diasplay: flex;

flex-direction属性决定主轴方向,属性row，从左往右（x轴）,属性column，从上到下（y轴）

justify-content设置主轴上元素的排列方式

flex-wrap设置子元素是否换行

align-items设置侧轴的子元素排列方式（单行）

align-content设置侧轴的子元素排列方式（多行）