[CSS]Flex (Taker course)

https://www.everyonecanwebsite.com/blog/post/flexbox-basic?utm_source=facebook&medium=video-post&utm_content=flexbox

https://www.youtube.com/watch?v=epHSeA7OCZU
取代 flaot的平易近人新屬性，以上課程連結 (Taker)。

display: flex;
設定後除了本身，其所有子元素會自動帶有此屬性，但只限一層，再下去就沒有了。

main axis & cross axis: flex line 與 main axis平行
各自還有 start & end，預設上，寫一個"十"字可以理解。

flex 主要設定方向、寬度、對齊方式

• flex container
• about axis
• about wrap
• flex item

flex: 0 1 auto; /*defult
flex-grow: 值有(0,1)；設定 item是否展開填滿容器，想像為是否要從樹成長成林
flex-shrink: 值有值有(0,1)；設定 overflow時是否自動縮小
flex-basis: 單位有(px,%)還可設定為 auto；設定 item的寬度