今天要做一個超級迷人,我喜歡稱之為flex gallery。
沒什麼Javascript、很多的CSS用flexbox、用transitions
- 功能
- 點擊指定的區塊要以它為主, 畫面變化
- 再點擊一次,恢復原狀
- 畫面
- 主要區塊變大, 中間的字變大
- 變大之後上下的字要進來
容器要先設定 display: flex;
元素要設定flex: 1 0 auto;
要解譯這一個之前,必須了解一個詞叫「剩餘空間」(超推薦看!!出處)
justify-content的屬性會失效
flex是下面三者的速寫
The second and third parameters (flex-shrink and flex-basis) are optional.
flex-grow剩餘空間分配比例flex-shirk壓縮比例flex-basis預約剩餘空間