【页面布局】水果摆盘蓝桥云课楼赛第31期（Web 前端挑战）

Pulseum

已于 2022-03-05 13:28:17 修改

阅读量351

点赞数

分类专栏：蓝桥云课楼赛第31期Web前端进阶文章标签：前端

于 2022-03-05 12:44:15 首次发布

本文链接：https://blog.csdn.net/qq_53472371/article/details/123292804

版权

这是一篇关于蓝桥云课楼赛第31期的前端挑战，主要聚焦于利用CSS3的Flex布局来创建水果摆盘的页面布局。文章介绍了Flex布局的重要性和在页面设计中的应用，并提出了具体的考试要求。

摘要由CSDN通过智能技术生成

【页面布局】水果摆盘

背景介绍

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

考试要求

解答：

index.css：

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


/* 以下代码不需要修改 */
#board {
   
	position: sticky;
	top: 0;
	width: 50vw;
	height: 50vw;
	min-width: 300px;
	min-height: 300px;
	max-width: 100vh;
	max-height