【页面布局】水果摆盘

背景介绍

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

1	wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip

下载完成之后的目录结构如下：

1
2
3

├── index.css
└── index.html
└── img

其中：

index.css 是本次挑战的需要补充样式文件。
index.html 为主页面。
img 图片文件夹。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【Web 服务】。

图片描述

考试要求

提示

align-self 值 ：
  flex-start flex-end center baseline stretch

order:<整数>(... -1, 0 (default), 1, ..)

在需要修改部分的代码有相关提示，请仔细阅读之后，使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码，把对应的水果放在对应的盘子里面，最终效果如下：

图片描述

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

总通过次数: 3254 | 总提交次数: 3256 | 通过率: 99.9%

难度: 简单标签: 2022, 省模拟赛, Web 前端, HTML5, CSS3

题解

/* 菠萝 TODO 待补充代码 */
.yellow {
	align-self: flex-end;
	order: 1;
}

ChatGPT:

order 属性用于定义 flex 容器中项目的排列顺序。它接受一个整数值作为参数，默认值为 0。值越小的项目越靠前排列，而值相同的项目按照它们在文档流中的顺序排列。

例如，如果有三个项目，它们的 order 属性分别设置为 1、2、0，那么它们在 flex 容器中的排列顺序将是第三个项目、第一个项目、第二个项目。
1
2
3
4
5
6
7
8
9
10
11
12
/* 示例 */
.item1 {
order: 2; /* 第一个项目 */
}

.item2 {
order: 3; /* 第二个项目 */
}

.item3 {
order: 1; /* 第三个项目 */
}
这样就可以通过设置 order 属性来控制 flex 容器中项目的排列顺序。