display屬性與方式

1. 由父元素設置(對div內的元素生效)：block, flex, grid, inline
2. 由自身設置(對自己生效)：float, inline-flex, inline-block

父元素設置

• block：預設的排列方式，由上到下
• flex:父容器在沒有指派寬度下會直接佔滿一列，與子容器寬度無關
  (父容器依循block的方式排列)
• inline:元素在同一列排列，各元素的寬度由自身內容決定
• gird:很複雜要另外拉出來講

子元素設置

• float:位置浮動
• inline-flex:依據指派子容器的寬度決定父容器是否在同列上
• inline-block
  子元素由左到右排列，但各自都會佔據固定的高度
  （雖然是inline但也具有block的性質）
• flex-grow:非負值的數字，有多餘空間是否延伸 (默認1，表示會延伸)
• flex-shrink:非負值的數字，空間不足是否壓縮(默認1，表示會壓縮)
• flex-basis:基本寬度(默認auto，原先大小)
• 合併寫法： flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> 
• flex: auto(1 1 auto) none( 0 0 auto)
• order：排列順序，數字越小越往前，沒有設置的話則依照順序

ref:
https://codepen.io/JayTutorials/pen/LOwzOa

https://medium.com/@flknbrry/blogpost-102-5214848d9e2e

https://blog.csdn.net/qq_46311036/article/details/107981321

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

https://www.w3.org/TR/css-align-3/#overview