提示：本篇文章僅僅是作者自己目前在備賽藍橋杯中，自己學習與刷題的學習筆記，寫的不好，歡迎大家批評與建議

---

由于個別題目代碼量與題目量偏大，請大家自己去藍橋杯官網【連接高校和企業 - 藍橋云課】去尋找原題，在這里只提供部分原題代碼

本題目為：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 的游戲】

---

感謝觀看此篇文章，謝謝大家的支持，本片文章只是我自己學習的歷程，有些寫的不好地方歡迎大家交流改動。

長路漫漫，我們還需努力！