Flexbox Grid 基于 Flex 的网格排版显示框架

Question

Flexbox Grid 是一个基于 Flex 的网格排版显示框架，使用方法和 Bootstrap 很相似，如果只需要 Bootstrap 的排版系统，那么你可以直接使用这个 CSS 文件，而不用引用臃肿的 Bootstrap。

响应性

响应修饰符允许在 xs、sm、md 和 lg 视口宽度上指定不同的列大小、偏移、对齐和分布。

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

百分比布局

基于百分比的宽度允许对列和行进行流体调整。

.col-xs-6 {
  flex-basis: 50%;
}

简单语法

你只需要记住行，列，内容。

<div class="row">
    <div class="col-xs-12">
        <div class="box">12</div>
    </div>
</div>

列偏移

<div class="row">
    <div class="col-xs-offset-3 col-xs-9">
        <div class="box">offset</div>
    </div>
</div>

自动宽度

将任意数量的自动调整大小列添加到一行。让网格找出答案。

<div class="row">
    <div class="col-xs">
        <div class="box">auto</div>
    </div>
</div>

嵌套网格

在网格内嵌套网格。

<div class="row">
    <div class="col-xs">
        <div class="box">
            <div class="row">
                <div class="col-xs">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

对齐

添加类，以便将元素对齐到行的开始或结束以及列的顶部、底部或中心。

.start-

<div class="row start-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.center-

<div class="row center-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.end-

<div class="row end-xs">
    <div class="col-xs-6">
        <div class="box">
            end
        </div>
    </div>
</div>

下面是一个示例，说明如何结合使用修饰符在不同的视口大小上实现不同的对齐。

<div class="row center-xs end-sm start-lg">
    <div class="col-xs-6">
        <div class="box">
            All together now
        </div>
    </div>
</div>

.top-

<div class="row top-xs">
    <div class="col-xs-6">
        <div class="box">
            top
        </div>
    </div>
</div>

.middle-

<div class="row middle-xs">
    <div class="col-xs-6">
        <div class="box">
            center
        </div>
    </div>
</div>

.bottom-

<div class="row bottom-xs">
    <div class="col-xs-6">
        <div class="box">
            bottom
        </div>
    </div>
</div>

分布

添加类以分发行或列的内容。

.around-

<div class="row around-xs">
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

.between-

<div class="row between-xs">
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
</div>

重排

添加类以重新排序列。

.first-

<div class="row">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs">
        <div class="box">
            3
        </div>
    </div>
</div>

.last-

<div class="row">
    <div class="col-xs-2 last-xs">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

倒序布局

.reverse

<div class="row reverse">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

相关链接

• Github 地址：https://github.com/kristoferjoseph/flexboxgrid
• 项目地址：http://flexboxgrid.com/