蓝桥杯前端Web赛道-新鲜的蔬菜

蓝桥杯前端Web赛道-新鲜的蔬菜

题目链接:1.新鲜的蔬菜 - 蓝桥云课 (lanqiao.cn)

题目要求如下:

其实很容易联想到使用flex布局,这是flex布局一种非常经典的骰子布局,推荐Flex 布局教程:实例篇 - 阮一峰的网络日志 (ruanyifeng.com)这里有所提及到如何使用flex布局完成一个骰子,可以去看看,我们先看这道题如何作答。

我们观察第一个盒子得出需要将元素摆放在中间,由于这里的盒子只有一个元素,所以可以使用align-items

该属性的定义是:设定元素在交叉轴上如何对齐。

交叉轴其实就是非主轴,一般来说flex布局默认主轴是row,也就是横向排布,所以当flex上的主轴为rowalign-items控制的就是column,也就是控制的纵向的排布,反之亦然。

首先我们让包裹这白菜的盒子变为flex布局,然后让他在交叉轴的位置居中

css 复制代码
#box1 {
  display: flex;
  align-items: center;
}

效果如下:

此时相当于只实现了垂直居中,我们还需要做到水平居中,才能让盒子中的白菜整齐的摆放在中间,这个时候就需要用到justify-content属性

justify-content:属性定义了项目在主轴上的对齐方式。

此时的主轴是row 也就是控制的是横向排列的方式,增加 justify-content: center;即可达到第一个盒子的要求

css 复制代码
#box1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

第二个盒子里有两个元素,根据需求我们确定只需要把第二个辣椒移动到右下角即可,控制一个元素的位置我们可以使用flex布局中的align-self

align-self:允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性

css 复制代码
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

根据题目要求我们选用flex-end 把它放到最下面,代码如下

css 复制代码
#box2 {
  display: flex;
}
#box2 .item:nth-child(2) {
  align-self: flex-end;
}

值得注意的是align-self是要设定在你需要控制的那个元素的样式里,而不是写在父盒子中。

我们可以看到效果如下:

此时我们还需要让它靠在最右边,就可以使用justify-content中的space-between 属性,该属性可以让盒子内的元素两端对齐,项目之间的间隔都相等。正好符合我们的要求

完整代码:

css 复制代码
#box2 {
  display: flex;
  justify-content: space-between;
}
#box2 .item:nth-child(2) {
  align-self: flex-end;
}

第三个盒子的样式可以直接依照上面的给出的属性和思路依葫芦画瓢,下面直接给出完整代码

css 复制代码
#box3 {
  display: flex;
  justify-content: space-between;
}
#box3 .item:nth-child(2) {
  align-self:center ;
}
#box3 .item:nth-child(3) {
  align-self: flex-end;
}

最后再次推荐Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com) 里面对于flex布局的使用到的各种属性有非常详细的解释

相关推荐
好奇心笔记8 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆8 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636029 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军9 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句12 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜12 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI12 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课14 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven15 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾15 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js