flex布局要牢記的兩個知識點：

1. 開啟了flex布局的元素叫flex container
2. flex container里面的直接子元素叫flex items
   這兩點要記牢，設置屬性的時候才不會搞混
   
   這個是flex布局的整體圖

一、flex container上的屬性

1.flex-direction

修改主軸方向的屬性，flex items默認都是沿著main axis（主軸）從main start開始往main end方向排布

<template><div class="container"><div class="item item1">item1</div><div class="item item2">item2</div><div class="item item3">item3</div></div>
</template><script lang="ts" setup></script><style lang="scss" scoped>
.container {width: 600px;height: 600px;background-color: red;display: flex; //開啟彈性布局/**改變主軸方向，可選值有row(默認值) 從左到右row-reverse 從右到左column 從上到下column-reverse 從下到上*/flex-direction: column-reverse;.item {width: 100px;height: 100px;color: #000;text-align: center;}
}
</style>

2.justify-content

justify-content決定了flex items在main axis(主軸)上的對齊方式

• flex-start(默認值)：與main star對齊
• flex-end:與main end 對齊
• cener:居中對齊
• space-between:flex items之間的距離相等，與main start、main end兩端對齊
• space-evenly:flex items之間的距離相等,flex items與main start、main end之間距離等于flex items之間的距離
• space-around:flex items之間的距離相等，flex items與main start、main end之間距離等于flex items之間的距離的一半

<style lang="scss" scoped>
.container {width: 600px;height: 600px;background-color: red;display: flex; //開啟彈性布局/**改變主軸方向，可選值有row(默認值) 從左到右row-reverse 從右到左column 從上到下column-reverse 從下到上*/flex-direction: column-reverse;justify-content: space-evenly;
}
</style>

3.align-items

決定了某一行flex items在cross axis上的所占空間里的對齊方式，主要是多行的時候有影響,這里先不管，當單行理解

• stretch:當flex items在cross axis方向的size為auto時（也就是沒有設置高度，也可能是沒有設置寬度，看交叉軸方向），會自動拉伸至填充flex container
• normal:在彈性布局中，效果和stretch一樣
• flex-start:與 cross start對齊
• flex-end:與cross end對齊
• center：居中對齊
• baseline:與基準線對齊

4. flex-wrap

默認情況下，所有的flex items都會在同一行顯示

• nowrap(默認值):一行顯示
• wrap：換行顯示
• wrap-reverse：換行顯示且在交叉軸上反轉排列

5.flex-flow

flex-direction和flex-wrap的縮寫

6.align-content

決定了多行flex items在cross axis上的對齊方式，用法與justify-content類似

• stretch(默認值)：與align-items的stretch類似
• flex-start：與cross star對齊
• flex-end:與cross end 對齊
• cener:居中對齊
• space-between:flex items之間的距離相等，與cross start、cross end兩端對齊
• space-evenly:flex items之間的距離相等,flex items與cross start、cross end之間距離等于flex items之間的距離
• space-around:flex items之間的距離相等，flex items與cross start、cross end之間距離等于flex items之間的距離的一半

二、flex items上的屬性

1.order

決定了flex items的排布順序

• 可以設置任意整數（正整數、負整數、0），值越小就越排在后面
• 默認值是0

2.align-self

用于覆蓋flex container設置的align-items屬性

• auto(默認值)：遵從flex container的align-items設置
• 可自行設置align-items中的值

3.flex-glow

決定了如何分配main size剩余的空間

• 可以設置任意非負數字(正小數、正整數、0)，默認值是0
• 如果所有flex items的flex-grow總和超過1，每個flex item按比例分配剩余空間
• 如果總和不超過1，那么分配的空間就是剩余空間 * flex-grow
• 最終大小不能大于max-width\max-height

4.flex-shrink

設置當一行顯示不下，并且設置flex-wrap:nowarp時，每一個flex items該如何收縮

• 可以設置任意非負數字(正小數、正整數、0)，默認值是1
• 如果所有flex items的flex-shrink總和超過1，每個flex item按比例收縮
• 如果總和不超過1，那么收縮的空間就是超出空間 * flex-shrink
• 最終大小不能小于min-width\min-height

5.flex-basis

用于設置flex items在主軸方向上的base size

• auto(默認值)
• 具體的寬度值
• 決定flex items的最終大小的因素，優先級從高到低

1. max-width\max-height\min-width\min-height
2. flex-basis
3. width\height
4. 內容本身的size

6.flex

flex-grow、flex-shrink、flex-basis的簡寫