备赛蓝桥杯之第十五届职业院校组省赛第一题：智能停车系统

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议

---

由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码

本题目为：2024年十五届省赛职业院校组真题第一题：智能停车系统

---

题目

需要考生作答的代码段如下：

.cars {position: absolute;z-index: 2;width: 600px;height: 600px;display: flex;flex-direction: column;/* 排成列*//* TODO: 请为下方属性填空，不要更改其他选择器里的代码 */flex-wrap: ;align-content: ;justify-content: ;}

题目要求：

请使用 `Flex` 完善 `css/style.css` 中的 TODO 代码，让每辆车正确停放至停车位

答案：

/* TODO: 请为下方属性填空，不要更改其他选择器里的代码 */
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;

---

拓展学习：

flex布局

当我们在使用css进行页面的排版时，通常有两种排版的方法

使用浮动、边距等方法的传统布局方式和flex弹性布局方法

两者都可以根据我们自己的心意去自由的摆放盒子，但是二者也有不一样的优缺点

传统布局优点就是：兼容性好，而缺点就是：布局繁琐；局限性，不能再移动端很好的布局

相比之下，flex弹性布局的优点就是：操作方便，布局极为简单，移动端应用很广泛，缺点就是：PC 端浏览器支持情况较差；IE11或更低版本，不支持或仅部分支持

这期我们就来学习学习flex布局的使用方法

flex布局原理

flex 是 flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex布局。

 注意：  
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效  
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局 =flex布局

采用 Flex 布局的元素，称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称“项目“。

注意：  
体验中 div 就是 flex父容器。  
体验中 span 就是 子容器 flex项目  
子容器可以横向排列也可以纵向排列

总结flex布局原理:

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

以下是flex布局父项常见属性

属性	描述
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式(多行)
align-items	设置侧轴上的子元素排列方式(单行)
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction

设置主轴的方向

在flex布局中，

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

但是我们可以通过flex-direction属性来自定义主轴的方向

属性值	描述
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content

设置主轴上的子元素排列方式

使用前一定要确定好主轴是哪一个

属性值	描述
flex-start	默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是x轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间(重要)

flex-wrap

设置子元素是否换行

在flex布局中，如果子盒子的宽度超过父盒子的宽度，flex会强迫修改子盒子宽度来占满一行，这样我们就要用到flex-wrap来使显示不开的盒子另起一行

属性值	描述
nowrap	默认不换行
warp	换行

align-content

设置侧轴上的子元素的排列方式(多行)

当侧轴内容多行时，就要用到align-content来进行多行的排列

适用于出现换行的情况（多行），单行情况下是无效的

使用前一定要确定好侧轴是哪一个

属性值	描述
flex-start	默认值在侧轴的头部开始排列
flex-end	从侧轴的尾部开始排列
center	在主轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度评分父元素高度

align-items

设置侧轴上的子元素排列方式(单行)

使用前一定要确定好侧轴是哪一个

属性值	描述
flex-start	默认值 从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸，但是子盒子不要给高度

flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性

以下是flex布局子项常见属性

flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

在分配多个有固定宽度的子盒子后，分配剩余的空间给剩下的没有定义宽度盒子

也可以给其中某一个固定的盒子占据更多份数的空间

align-self

控制子项自己在侧轴上的排列方式

思维导图

拓展练习

给大家推荐一个练习flex编程属性的一个好玩的网站，这个网站主要是使用学到的flex属性知识去是‘青蛙’排版到正确的‘荷叶’上，一共24关，很好的练习flex属性编程技术【Flexbox Froggy - 一个学习 CSS flexbox 的游戏】

---

感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。

长路漫漫，我们还需努力！