Flexbin
Flexible and gapless image gallery layout like Google Images and 500px.com. Based on article of xieranmaya
- Pure CSS, no need for JavaScript or server side calculation
- Responsive, nice look on both desktop and mobile devices
- Gapless, all spaces between images are the same
- Little cropping, no deformation
- SaSS support
- Chrome 31+, Firefox 36+, Safari 10+
Demo: https://guoyunhe.me/demo/flexbin/
Get Started
Download
- Download this git repo as zip or tar.gz file.
- NPM
npm install flexbin
- Bower (TODO)
Import
Use flexbin.css
in your HTML:
or import flexbin.scss
in your SaSS project:
;
Markup
HTML markup is very simple:
...
If you want extra space surround Flexbin gallery, use "flexbin-margin" class:
...
Customize with SaSS
If you use SaSS, you can customize Flexbin further:
// Desktop, large screen devices ; // height of image rows ; // space between images // Tablet, medium screen devices ;;; // Phone, small screen devices ;;; ; .my-flexbin .my-flexbin-large
TODO
- Publish on Bower, Composer, Gem, etc.
- Fallback mode for IE, Edge and other old browsers
Copyright & License
Copyright 2017 Guo Yunhe & xieranmaya. Code released under GNU General Public License version 3 or later. See LICENSE.