十堰做网站最好的公司,江苏网站制作企业,平台推广方案,微分销商城网站建设蓝桥杯前端Web赛道-新鲜的蔬菜
题目链接#xff1a;1.新鲜的蔬菜 - 蓝桥云课 (lanqiao.cn)
题目要求如下#xff1a; 其实很容易联想到使用flex布局#xff0c;这是flex布局一种非常经典的骰子布局#xff0c;推荐Flex 布局教程#xff1a;实例篇 - 阮一峰的网络日志 (r…蓝桥杯前端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;
}效果如下 此时相当于只实现了垂直居中我们还需要做到水平居中才能让盒子中的白菜整齐的摆放在中间这个时候就需要用到justify-content属性
justify-content:属性定义了项目在主轴上的对齐方式。
此时的主轴是row 也就是控制的是横向排列的方式增加 justify-content: center;即可达到第一个盒子的要求
#box1 {display: flex;align-items: center;justify-content: center;
}第二个盒子里有两个元素根据需求我们确定只需要把第二个辣椒移动到右下角即可控制一个元素的位置我们可以使用flex布局中的align-self
align-self允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}根据题目要求我们选用flex-end 把它放到最下面代码如下
#box2 {display: flex;
}
#box2 .item:nth-child(2) {align-self: flex-end;
}值得注意的是align-self是要设定在你需要控制的那个元素的样式里而不是写在父盒子中。
我们可以看到效果如下 此时我们还需要让它靠在最右边就可以使用justify-content中的space-between 属性该属性可以让盒子内的元素两端对齐项目之间的间隔都相等。正好符合我们的要求
完整代码
#box2 {display: flex;justify-content: space-between;
}
#box2 .item:nth-child(2) {align-self: flex-end;
}第三个盒子的样式可以直接依照上面的给出的属性和思路依葫芦画瓢下面直接给出完整代码
#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布局的使用到的各种属性有非常详细的解释
