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

代码及注释:

css 复制代码
/* 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设置侧轴的子元素排列方式(多行)

相关推荐
你今天刷题了吗?几秒前
蓝桥杯练习:翻转二叉树
蓝桥杯
吞掉星星的鲸鱼4 小时前
使用高德api实现天气查询
前端·javascript·css
自动花钱机11 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
-代号952717 小时前
【JavaScript】十四、轮播图
javascript·css·css3
Enti7c19 小时前
HTML5和CSS3的一些特性
开发语言·css3
Jasmin Tin Wei19 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
随笔记19 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
前端Hardy19 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy20 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy20 小时前
HTML&CSS:不一样的开关效果
javascript·css·html