上課順手筆記下常用到的 flex , 以免又忘了
置中
首先先設定 body 為 flex , 並且設定高度為螢幕高度 , 因為 flex 會影響子層 , 所以設定 container 的 margin 為 auto 即可將 container 置中
See the Pen flex-center1 by 喇賽人 (@weber87na) on CodePen.
置中2
這種方法比較常見 , 一樣設定 body 為 flex , 並且加上 align-items: center 及 justify-content: center 這樣即可讓子層置中
See the Pen flex-center2 by 喇賽人 (@weber87na) on CodePen.
三欄等寬 glow
有時候懶得計算寬度有多寬 , 所以可以直接用這招讓物件等寬 , 只要設定 flex-glow 就能輕鬆搞定
See the Pen flex-glow-col-same-width by 喇賽人 (@weber87na) on CodePen.
三欄左右等寬 glow
這個主要利用 flex-glow 特性 , 先在左右設定寬度為 200px , 中間則分配剩餘空間 , 所以設定 flex-grow: 1;
See the Pen flex-grow-3col by 喇賽人 (@weber87na) on CodePen.
三欄左右等寬 shrink
在中間元素以 shrink 特性設定為 1 (shrink 預設值為 1) , 並且 width 設定為 100% 即可 , 另外左右設定想要的寬度 , 並且設定 shrink 為 0 , 如果沒設定的話依然會收縮
See the Pen flex-shrink-3col by 喇賽人 (@weber87na) on CodePen.
仿 FB 照片排列
練習 flex 過程中剛好看到 FB 照片排法 , 左邊一大塊 , 右邊分成三小塊 , 右邊可以靠 flex-direction: column 去搞定 , 另外三小塊設定 flex-glow 即可輕鬆分成三份 , 仔細想想 flex 用太大也不太好 , 這裡因為小塊是直排所以靠 block 加上計算尺寸應該也可以搞定 , 這裡就懶得計算靠著 flex-glow 寫起來好像更簡單
See the Pen Untitled by 喇賽人 (@weber87na) on CodePen.