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

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

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

题目要求如下：

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

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

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

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

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

#box1 {
  display: flex;
  align-items: center;
}
1
2
3
4

效果如下：

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

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

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

#box1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
1
2
3
4
5

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

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3

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

#box2 {
  display: flex;
}
#box2 .item:nth-child(2) {
  align-self: flex-end;
}
1
2
3
4
5
6

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

我们可以看到效果如下：

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

完整代码：

#box2 {
  display: flex;
  justify-content: space-between;
}
#box2 .item:nth-child(2) {
  align-self: flex-end;
}
1
2
3
4
5
6
7

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

#box3 {
  display: flex;
  justify-content: space-between;
}
#box3 .item:nth-child(2) {
  align-self:center ;
}
#box3 .item:nth-child(3) {
  align-self: flex-end;
}
1
2
3
4
5
6
7
8
9
10

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