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

相关推荐
孤水寒月7 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
涔溪15 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
呆呆的心16 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥17 小时前
CSS之布局详解指南
css
拾光拾趣录20 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter20 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter20 小时前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊1 天前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录1 天前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee1 天前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法