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

1. Download this git repo as zip or tar.gz file.
2. NPM npm install flexbin
3. Bower (TODO)

Import

Use flexbin.css in your HTML:

<link href="path/to/flexbin.css" type="text/css" rel="stylesheet" media="all" />

or import flexbin.scss in your SaSS project:

@import "path/to/flexbin.scss";

Markup

HTML markup is very simple:

<div class="flexbin">
    <a href="product/1.html">
        <img src="images/1.jpg" />
    </a>
    <a href="product/2.html">
        <img src="images/2.jpg" />
    </a>
    <a href="product/3.html">
        <img src="images/3.jpg" />
    </a>
    ...
</div>

If you want extra space surround Flexbin gallery, use "flexbin-margin" class:

<div class="flexbin flexbin-margin">
    <a href="product/1.html">
        <img src="images/1.jpg" />
    </a>
    <a href="product/2.html">
        <img src="images/2.jpg" />
    </a>
    <a href="product/3.html">
        <img src="images/3.jpg" />
    </a>
    ...
</div>

Customize with SaSS

If you use SaSS, you can customize Flexbin further:

// Desktop, large screen devices
$flexbin-row-height: 200px; // height of image rows
$flexbin-space: 10px; // space between images

// Tablet, medium screen devices
$flexbin-tablet-max: 800px;
$flexbin-row-height-tablet: 150px;
$flexbin-space-tablet: 8px;

// Phone, small screen devices
$flexbin-phone-max: 400px;
$flexbin-row-height-phone: 100px;
$flexbin-space-phone: 4px;

@import "path/to/flexbin.scss";

.my-flexbin {
    @include flexbin(100px, 8px);
}

.my-flexbin-large {
    @include flexbin(400px, 20px);

    @media (max-width: 768px) {
        @include flexbin(200px, 10px);
    }
}

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.