/*http://gitlab.alibaba-inc.com/alinwmobile/alinwm-css/raw/master/flexbox-test.html*/
// flexbox horizontal && flexbox vertical
.{$prefix}-FBH, .{$prefix}-FBV
    display -webkit-box
    display -webkit-flex
    display flex

// flexbox vertical
.{$prefix}-FBV
    -webkit-box-orient vertical
    -webkit-box-direction normal
    -webkit-flex-direction column
    flex-direction column

// cross axis's align start
.{$prefix}-FBAS
    -webkit-box-align start
    -webkit-align-items flex-start
    align-items flex-start

// cross axis's align center
.{$prefix}-FBAC
    -webkit-box-align center
    -webkit-align-items center
    align-items center

// cross axis's align end
.{$prefix}-FBAE
    -webkit-box-align end
    -webkit-align-items flex-end
    align-items flex-end

// main axis's justify start
.{$prefix}-FBJS
    -webkit-box-pack start
    -webkit-justify-content flex-start
    justify-content flex-start

// main axis's justify center
.{$prefix}-FBJC
    -webkit-box-pack center
    -webkit-justify-content center
    justify-content center

// main axis's justify end
.{$prefix}-FBJE
    -webkit-box-pack end /*待验证 是否要删除*/
    -webkit-justify-content flex-end
    justify-content flex-end

// main axis's justify
.{$prefix}-FBJ
    -webkit-box-pack justify /*待验证 是否要删除*/
    -webkit-justify-content space-between
    justify-content space-between

.{$prefix}-FBH
    > .{$prefix}-FB1, > .{$prefix}-FB2, > .{$prefix}-FB3
        width 0

for $n in 1 2 3
    .{$prefix}-FB{$n}
        -webkit-box-flex $n
        -webkit-flex $n
        flex $n