flex样式框架-1127改

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

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

    height: 100%;
    width: 100%;
    background: #dddddd;
    display: flex;
    position: absolute;
    flex-direction: column;
    box-sizing: border-box;
    font-size:32rpx;
}

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

.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;

    border: 1px solid 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%;
}

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