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

相关推荐
拜无忧19 小时前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css
jingling5551 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
luckyzlb1 天前
02- html && css
前端·css·html
闻缺陷则喜何志丹1 天前
【数论】P10580 [蓝桥杯 2024 国 A] gcd 与 lcm|普及+
c++·数学·蓝桥杯·数论·洛谷
你的电影很有趣1 天前
lesson55:CSS导航组件全攻略:从基础导航条到动态三级菜单与伸缩菜单实现
前端·css
蔗理苦1 天前
2025-09-05 CSS4——浮动与定位
开发语言·前端·css·html·css3
slim~1 天前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
F2E_Zhangmo1 天前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
蔗理苦2 天前
2025-09-05 CSS3——盒子模型
前端·css·css3
qq_510351592 天前
vw 和 clamp()
前端·css·html