flex样式框架

/**app.wxss**/
view {
    margin: 0;
}

.container {
    /*height: 100%;
    width: 100%;
    margin: 0;
    position: absolute;
    background: #98c0ee;*/

    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/*----------------------*/

.box-row {
    display: flex;
    flex-direction: row;
}
.box-row-weap {

}
.box-row-left {
    justify-content: flex-start;
}
.box-row-center {
    justify-content: center;
}
.box-row-right {
    justify-content: flex-end;
}

.box-column {
    display: flex;
    flex-direction: column;
}
.box-column-top {
    justify-content: flex-start;
}
.box-row-middle {
    justify-content: center;
}
.box-column-bottom {
    justify-content: flex-end;
}

/*----------------------block bpx row*/

.block-box-row {
    display: flex;
    flex-direction: row;

    background: gray;
    height: 50px;
    width: 50px;
    margin: 5rpx;
}

/*----------------------block bpx column*/

.block-box-column {
    display: flex;
    flex-direction: column;

    background: gray;
    height: 50px;
    width: 50px;
    margin: 5rpx;
}


.block-box-row.block-box-middle, .block-box-column.block-box-center  {
    align-items: center;
}

.block-box-row.block-box-center, .block-box-column.block-box-middle  {
    justify-content: center;
}

.block-box-row.block-box-top, .block-box-column.block-box-left {
    align-items: flex-start;
}

.block-box-row.block-box-left, .block-box-column.block-box-top {
    justify-content: flex-start;
}

.block-box-row.block-box-bottom, .block-box-column.block-box-right {
    align-items: flex-end;
}

.block-box-row.block-box-right, .block-box-column.block-box-bottom  {
    justify-content: flex-end;
}


/*----------------------square*/

.square {
    /*flex: 1 1 auto;*/
    background: rgba(255, 0, 0, 0.66);
}

/*----------------------lbock*/

.block {
    flex: 0 0 auto;
}

.block-center, .block-middle {
    align-self: center;
}

.block-left, .block-top {
    align-self: flex-start;
}

.block-right, .block-bottom {
    align-self: flex-end;
}

.block-1 {
    flex: 1 0 auto;
}

.block-1-center, .block-1-middle {
    align-self: center;
}

.block-1-left, .block-1-top {
    align-self: flex-start;
}

.block-1-right, .block-1-bottom {
    align-self: flex-end;
}

.block-2 {
    flex: 2 0 auto;
}

.block-2-center, .block-2-middle {
    align-self: center;
}

.block-2-left, .block-2-top {
    align-self: flex-start;
}

.block-2-right, .block-2-bottom {
    align-self: flex-end;
}

.block-3 {
    flex: 3 0 auto;
}

.block-3-center, .block-3-middle {
    align-self: center;
}

.block-3-left, .block-3-top {
    align-self: flex-start;
}

.block-3-right, .block-3-bottom {
    align-self: flex-end;
}

.block-4 {
    flex: 4 0 auto;
}

.block-4-center, .block-4-middle {
    align-self: center;
}

.block-4-left, .block-4-top {
    align-self: flex-start;
}

.block-4-right, .block-4-bottom {
    align-self: flex-end;
}

.block-5 {
    flex: 5 0 auto;
}

.block-5-center, .block-5-middle {
    align-self: center;
}

.block-5-left, .block-5-top {
    align-self: flex-start;
}

.block-5-right, .block-5-bottom {
    align-self: flex-end;
}

<view class="container">
    <view class="box-column" style="height:80%;background:lightgreen;">
        <view class="box-row box-row-left box-row-wrap" style='background:ghostwhite;'>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>111</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>222</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>333</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>444</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>555</text>
            </view>
        </view>
        <view class="box-row box-row-center box-row-wrap" style='background:ghostwhite;'>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>111</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>222</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>333</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>444</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>555</text>
            </view>
        </view>
        <view class="box-row box-row-right box-row-wrap" style='background:ghostwhite;'>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>111</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>222</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>333</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>444</text>
            </view>
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>555</text>
            </view>
        </view>
    </view>
    <view class="box-column" style="height:20%;background:lightyellow;">
        <view class="block block-center" style='background:ghostwhite;'>
            <button type='primary'>提交</button>
        </view>
    </view>
</view>

转载于:https://my.oschina.net/u/1538767/blog/1576254