蓝桥杯前端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布局的使用到的各种属性有非常详细的解释

相关推荐
前端小巷子4 分钟前
深入理解TCP协议
前端·javascript·面试
万少5 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
Coding小公仔43 分钟前
LeetCode 8. 字符串转换整数 (atoi)
算法·leetcode·职场和发展
GEEK零零七1 小时前
Leetcode 393. UTF-8 编码验证
算法·leetcode·职场和发展·二进制运算
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js