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设置侧轴的子元素排列方式(多行)

相关推荐
呆呆的心3 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
爱学习的小学渣3 小时前
Css: flex布局+趣味Demo
css
wuxuanok3 小时前
Web前端开发-HTML、CSS
前端·css·html
lichenyang4536 小时前
css模块化以及rem布局
前端·javascript·css
棉花糖超人6 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
Sally璐璐15 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062715 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台15 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿1213815 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx16 小时前
前端-CSS-day1
前端·css