The mixin can be used to create a set of floating panel rows having the same height in each row. It uses display:flex to do this.

The mixin takes two optional parameters:

• $space-between (space between panels, default: 10px)
• $cols (number of panels, default: 3)

In addition the optional @content ist added to inner <div>s.

Sample:

sass:

.kacheln{
    @include flex-panel-layout(20px, 4){
        border: solid silver 1px;
        .footer{
            background: #efefef;
            border-top: solid silver 1px;
            text-align:center;
            padding: 10px;
        }
    };
}

html:

<div class="kacheln">
    <div class="kachel">
        <div class="content">
            <div>
                content
            </div>
            <div class="footer">
                Footer
            </div>
        </div>
    </div>
    <div class="kachel"> ...</div>
    <div class="kachel"> ...</div>
</div>