蓝桥杯线上模拟赛——Flex 经典骰子布局

网友投稿 317 2022-08-23

蓝桥杯线上模拟赛——Flex 经典骰子布局

1 引言

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

进入模拟赛:问题描述

本次试题主要是补全Flex 经典骰子布局项目的index.html 文件空缺的 css 代码,并按照提示或要求完成效果图。

需要注意的是要严格按照考试步骤操作,要根据考试需求所要求的进行文件的添加、代码的添加修改等以及不要修改项目文件名、文件夹路径等。

CSS3(Flex Box)弹性盒子部分知识点:

(具体可看:display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。(注意:弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。)

2.flex-direction(位置方向):row(从左到右排列) | row-reverse| column(纵向排列)|column-reverse

3.flex-wrap(换行): nowrap(默认)|wrap(多行、溢出的部分会被放置到新行,子项内部会发生断行)|wrap-reverse|initial|inherit

4.align-items(在纵轴方向上的对齐): flex-start | flex-end | center | baseline | stretch

5.align-content(各个行纵轴方向的对齐): flex-start | flex-end | center | space-between | space-around | stretch

6.justify-content(沿着弹性容器的主轴线对齐): flex-start | flex-end | center | space-between | space-around

7.flex-basis(设置或检索弹性盒伸缩基准):number | auto | initial | inherit

3 算法描述

2.1将每个骰子的外层div进行命名,分别为div2、div3、div4……。

2.2根据要求及样式进行CSS书写。

/*todo:请补全剩余骰子布局代码*/

.div2 {

       justify-content: space-around;

       align-items: center;

       flex-direction: column;

   }

.div3 {

       justify-content: space-around;

   }    

.div3 p:nth-child(1) {

       align-self: flex-start;

   }

.div3 p:nth-child(2) {

       align-self: center;

   }

.div3 p:nth-child(3) {

       align-self: flex-end;

   }

.div4,.div5,.div6,.div7,.div8,.div9 {

       flex-direction: column;

       justify-content: space-around;

   }

.div4 div,.div5 div,.div6 div,.div7 div,.div8 div,.div9 div {

       display: flex;

       justify-content: space-around;

   }

.div8 div {

       justify-content: space-between;

   }        

4 结语

总的来说,主要要对CSS3弹性盒子的属性意义要有一定的了解。在本次练习中主要难点在于对部分属性的不了解。同时在此次练习中,还学到了:nth-child(n)、:nth-of-type(n)选择器的使用。通过第一次的练习以及练习中所获的,希望在后续练习中更进一步。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:营销“翻车”厂家更该反思!
下一篇:11连败,昔日“红土小王子”蒂姆复出之路不好走!
相关文章

 发表评论

暂时没有评论,来抢沙发吧~