备赛蓝桥杯之第十五届职业院校组省赛第一题：智能停车系统
提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议
由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码
本题目为：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 的游戏】
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！
原文地址：https://blog.csdn.net/s1316339343/article/details/145284661
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！