css flex & grid 的一生

英文符號：
- dashed

VSCODE中的多行編輯,選擇多行
學名叫做列選擇，可以讓光標在一列上

flex

flex的一生是輝煌的一生，奮鬥的一生,是波瀾壯闊的一生，她像一束光照進了黑暗的前端佈局領域。2009年，那一年金融危機剛剛過去（好像沒有什麼關係），w3這個組織又要來搞事情了，w3組織的成員，谷歌，蘋果，微軟的工程師合計了一下，設計出了一種新的佈局方式，併發布了w3草案，提出了當今flex的雛形。

flex的學習資料：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.youtube.com/watch?v=1Rs2ND1ryYc

container

display: flex;
flex-direction: row|column;

flex-wrap: wrap | nowrap;
justify-content: center| flex-end|flex-start|space-around|space-between；
align-items: center| flex-end

container-item

order
flex-grow
flex-shrink 縮小比例
flex-basis

flex: grow shrink basis

grid