布局

均等分割

用法

示例

HTML

<div class="baie-flex">
    <div class="baie-flex__item">
        <div class="placeholder">baie</div>
    </div>
</div>

<div class="baie-flex">
    <div class="baie-flex__item">
        <div class="placeholder">baie</div>
    </div>

    <div class="baie-flex__item">
        <div class="placeholder">baie</div>
    </div>
</div>

<div class="baie-flex">
    <div class="baie-flex__item">
        <div class="placeholder">baie</div>
    </div>

    <div class="baie-flex__item">
        <div class="placeholder">baie</div>
    </div>

    <div class="baie-flex__item">
        <div class="placeholder">baie</div>
    </div>
</div>

CSS

.baie-flex {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.baie-flex__item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.baie-flex__item .placeholder {
    background-color: #ebebeb;
    height: .72rem;
    line-height: .72rem;
    text-align: center;
    margin: .10rem;
    font-size: .28rem;
    color: #cfcfcf;
}

响应式流动

用法

示例

HTML

<div class="baie-flex-rsp">
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
    <div class="baie-flex-rsp__item">
        <div class="placeholder">baie</div>
    </div>
</div>

CSS

.baie-flex-rsp {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex; /* flex布局 */
    justify-content: space-between; /* 水平对齐 两端对齐*/
    align-items: flex-start; /* 垂直对齐 顶部对齐 */
    flex-wrap: wrap; /* 换行 */
}
.baie-flex-rsp__item {
    display: block;
}
.baie-flex-rsp__item .placeholder {
    background-color: #ebebeb;
    width: 1.6rem;
    height: .72rem;
    line-height: .72rem;
    text-align: center;
    margin: .10rem;
    font-size: .28rem;
    color: #cfcfcf;
}