尤川豪   ·  1月前
Exp. 1,750  ·  227 貼文  ·  157 留言

純 css 圖庫頁面排版

看到一個很神的 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

原理是什麼?值得研究

  分享   共 105 次點閱
共有 3 則留言
tales   ·  1月前
Exp. 56  ·  0 貼文  ·  5 留言

這個是這樣的:

Flex 容器設定了 flex-warp: warp ,於是內容撐滿一行的時候就會自動換行。

而內容物(圖片)指定了高度,所以寬度會根據圖片本身的的長寬比變化;

再加上 flax-grow: 1 ,他又會再變化寬度以補足因為換行而沒有填滿的空間。

 
尤川豪   ·  1月前
Exp. 1,750  ·  227 貼文  ·  157 留言

太讚了... 原來 flexbox 好用到這個程度...

尤川豪   ·  1月前
Exp. 1,750  ·  227 貼文  ·  157 留言

感謝指點...

您的留言
尤川豪
Exp. 1,750  ·  227 貼文  ·  157 留言

關於作者

Devs.tw 作者,喜歡分享&建造新東西的工程師。

歡迎在 Facebook 追蹤我!不定期分享有趣技術文章!

  查看個人檔案