Devs.tw 是讓工程師寫筆記、網誌的平台。歡迎您隨手紀錄、寫作，方便日後搜尋！
Devs.tw 是讓工程師寫筆記、網誌的平台。歡迎您隨手紀錄、寫作，方便日後搜尋！
看到一個很神的 css 套件
大量圖片顯示時 會有漂亮的切版排版
fully responsive
https://www.cssscript.com/demo/responsive-justified-photo-grid-layout-pure-css-flexbin-css/
不需要 js，也沒用到任何伺服器端的計算
https://www.cssscript.com/responsive-justified-photo-grid-layout-pure-css-flexbin-css/
好像是用 flexbox 做到的 超厲害的
https://github.com/guoyunhe/flexbin/
https://github.com/guoyunhe/flexbin/blob/master/flexbin.scss
原理是什麼？值得研究
這個是這樣的：
Flex 容器設定了 flex-warp: warp ，於是內容撐滿一行的時候就會自動換行。
而內容物（圖片）指定了高度，所以寬度會根據圖片本身的的長寬比變化；
再加上 flax-grow: 1 ，他又會再變化寬度以補足因為換行而沒有填滿的空間。
太讚了... 原來 flexbox 好用到這個程度...
感謝指點...