尤川豪   ·  1年前
298 貼文  ·  215 留言

純 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

原理是什麼?值得研究

  分享   共 436 次點閱
按了喜歡:
共有 3 則留言
tales   ·  1年前
0 貼文  ·  5 留言

這個是這樣的:

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

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

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

 
尤川豪   ·  1年前
298 貼文  ·  215 留言

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

尤川豪   ·  1年前
298 貼文  ·  215 留言

感謝指點...

您的留言
尤川豪
298 貼文  ·  215 留言

Devs.tw 是讓工程師寫筆記、網誌的平台。隨手紀錄、寫作,方便日後搜尋!

歡迎您一起加入寫作與分享的行列!

查看所有文章