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

相关推荐

  1. web2022水果拼盘

    2024-03-23 19:18:02       43 阅读
  2. Web大学组)2022:展开你的扇子

    2024-03-23 19:18:02       53 阅读
  3. Web大学组)2022:冬奥大抽奖

    2024-03-23 19:18:02       50 阅读
  4. web2022:冬奥大抽奖

    2024-03-23 19:18:02       46 阅读
  5. Web大学组)2023:视频弹幕

    2024-03-23 19:18:02       57 阅读
  6. C/C++A组历年题解(2020~2023

    2024-03-23 19:18:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-23 19:18:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-23 19:18:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-23 19:18:02       82 阅读
  4. Python语言-面向对象

    2024-03-23 19:18:02       91 阅读

热门阅读

  1. 超级电容实际可用电量估算

    2024-03-23 19:18:02       162 阅读
  2. android CoordinatorLayout使用

    2024-03-23 19:18:02       44 阅读
  3. 安卓的几个核心的组件的简单介绍

    2024-03-23 19:18:02       41 阅读
  4. Linux进程间通信之消息队列

    2024-03-23 19:18:02       46 阅读
  5. 实用网站推荐 [持续更新中...]

    2024-03-23 19:18:02       48 阅读
  6. Qt拖放文件实现(Drag,Drop, MimeData )

    2024-03-23 19:18:02       40 阅读
  7. Leetcode-06-Z字形变换

    2024-03-23 19:18:02       43 阅读