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-wrap {
    flex-wrap:wrap;
}
.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-2 {
    flex: 2 0 auto;
}

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

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

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

.classic-proportion-12 {
    width: 8.3333%;
}
.classic-proportion-11 {
    width: 9.0909%;
}
.classic-proportion-10 {
    width: 10%;
}
.classic-proportion-9 {
    width: 11.1111%;
}
.classic-proportion-8 {
    width: 12.5%;
}
.classic-proportion-7 {
    width: 14.2857%;
}
.classic-proportion-6 {
    width: 16.6667%;
}
.classic-proportion-5 {
    width: 20%;
}
.classic-proportion-4 {
    width: 25%;
}
.classic-proportion-3 {
    width: 33.3333%;
}
.classic-proportion-2 {
    width: 50%;
}
.classic-proportion-1 {
    width: 100%;
}
<view class="container">
    <view class="box-row box-row-left box-row-wrap" style='background:ghostwhite;'>
        <view class="block-box-column block-box-right block-box-middle block-1" style="padding:0 10rpx;text-align:right;">
            <input value="18051298331" placeholder="您的联系方式"/>
        </view>
    </view>
    <view class="box-row box-row-left box-row-wrap" style='background:ghostwhite;'>
        <view class="box-row box-row-center classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>111</text>
            </view>
        </view>
        <view class="box-row box-row-center classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>222</text>
            </view>
        </view>
        <view class="box-row box-row-center classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>333</text>
            </view>
        </view>
        <view class="box-row box-row-center classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>444</text>
            </view>
        </view>
        <view class="box-row box-row-center classic-proportion-4">
            <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 classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>666</text>
            </view>
        </view>
        <view class="box-row box-row-center classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>777</text>
            </view>
        </view>
        <view class="box-row box-row-center classic-proportion-4">
            <view class="block-box-column block-box-center block-box-middle">
                <text class='square'>888</text>
            </view>
        </view>
    </view>
    <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 class="block-box-column block-box-center block-box-middle">
            <text class='square'>666</text>
        </view>
        <view class="block-box-column block-box-center block-box-middle">
            <text class='square'>777</text>
        </view>
        <view class="block-box-column block-box-center block-box-middle">
            <text class='square'>888</text>
        </view>
    </view>
    <view class="box-column">
        <view class="block block-center" style='background:ghostwhite;position:fixed;bottom:20rpx;'>
            <button type='primary'>提交</button>
        </view>
    </view>
</view>
相关文章
相关标签/搜索