介绍
蓝桥社区停车场正式对外开放，但由于停车位线标记不够完善，车主总是乱停乱放。为了使车辆有序的停放，现在给停车场绘制了醒目的停车位线。
本题需要在已提供的基础项目中，使用 CSS 让每辆车正确停放至停车位。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── images
├── css
| └── style.css
└── index.html其中：
images是图片文件夹。index.html是主页面。css/style.css是待补充代码的css文件。
在浏览器中预览 index.html 页面效果如下：
目标
请使用 Flex 完善 css/style.css 中的 TODO 代码，让每辆车正确停放至停车位，最终实现下图效果。
提示：设置子元素为（flex-wrap）换行 ，在交叉轴上使用（align-content）两端对齐分布，在主轴上使用（justify-content）两端对齐分布。两端对齐分布效果即均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
规定
- 请勿修改
css/style.css文件外的任何内容。 - 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题⽆法通过。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="./css/style.css" rel="stylesheet" type="text/css" /><title>智能停车系统</title>
</head>
<body><div class="cars"><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div><div class="car"><img src="./images/car.png" /></div></div><div class="parking-lot"><div class="parking-lot-row"><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div><div class="parking-garage hidden"></div><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div><div class="parking-garage hidden"></div><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div></div><div class="parking-lot-row"><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div><div class="parking-garage hidden"></div><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div><div class="parking-garage hidden"></div><div class="parking-garage hidden"></div></div><div class="parking-lot-row"><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div><div class="parking-garage hidden"></div><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div><div class="parking-garage hidden"></div><div class="parking-garage"><div class="inner-border"></div><div class="parking-space"></div></div></div></div>
</body></html>.cars {position: absolute;z-index: 2;width: 600px;height: 600px;display: flex;flex-direction: column; /* 排成列*//* TODO: 请为下方属性填空，不要更改其他选择器里的代码 */flex-wrap: wrap; align-content: space-between;justify-content:space-between;}/* 以下代码不需要修改 */body {margin: 0;padding: 0;background-color: #d4e3ff;display: flex;align-items: center;justify-content: center;height: 100vh;
}.car {width: 90px;height: 200px;display: flex;align-items: center;justify-content: center;
}.car>img {width: 100%;
}.parking-lot-row {width: 640px;height: 220px;
}.parking-lot {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;width: 660px;border: 4px dashed rgb(130, 130, 130);
}.hidden {visibility: hidden;
}.parking-lot-row {display: flex;height: 200px;align-items: center;
}.parking-garage {position: relative;width: 100px;height: 100px;background-color: #ddd;border: 2px solid #999;margin: 20px;
}.inner-border {border: 2px dashed #999;border-radius: 10px;position: absolute;top: 2px;right: 2px;bottom: 2px;left: 2px;z-index: 1;
}.parking-space {background-color: #5e92f366;position: absolute;top: 22px;left: 22px;width: 40px;height: 40px;}
做题总结
- 先看题目，细看，会有提示；
- 不要看到题目半路开干；
- 复习 Flex 布局。