[css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性

在 CSS3 支援  flexbox 排版以後,相信許多人已經使用了 flexbox,還沒使用過的可以去玩 Flexbox Froggy 學習一下 XD 最近使用 flexbox 製作 RWD 網站時,順便弄清楚了 flex-basis, flex-grow , flex-shrink 在這邊紀錄一下 flex-basis 決定 flexbox 排版的 item 的初始寬/高(取決於 flex-direction 的方向). auto 預設值,根據 item 的內容決定寬/高 <width/height> 指定特定的寬/高,可以是數值也可以是比例. Q: flex-basis 和 width/height 有什麼不一樣? A: 當 flex-direction: row 時,flex-basis 會決定了 width. 當 flex-direction: column 時,flex-basis 會決定了 height.  備註: position: absolute 的 elment 因為不會是 flexbox 排版因此無法透過 […]

Continue reading