flex 布局

flex布局

弹性布局-等比，下面代码三等分，要几等分就写几个flex-item的div

<div class="flex">
    <div class="flex-item">
        1/3大小
    </div>
    <div class="flex-item">
        1/3大小
    </div>
    <div class="flex-item">
        1/3大小
    </div>
</div>

弹性布局-自适应，下面代码是左边固定100px宽度，右边自适应宽度

<div class="flex">
    <div style="width:100px;">宽度100px</div>
    <div class="flex-item">
        // 自适应内容
    </div>
</div>

弹性布局-垂直, 下面代码flex-item的高度 = 整行高度100px - 30px

<div class="flex flex-column" style="height:100px;">
    <div style="height:30px;">高度30px</div>
    <div class="flex-item">
        // 自适应内容
    </div>
</div>

弹性布局-水平居中 a-center 垂直居中 j-center

<div class="flex a-center">
    <div class="flex-item h120">
        1/3大小
    </div>
    <div class="flex-item h80">
        1/3大小
    </div>
    <div class="flex-item h100">
        1/3大小
    </div>
</div>

<div class="flex j-center">
    <div class="w120">
        内容
    </div>
    <div class="w80">
        内容
    </div>
    <div class="w100">
        内容
    </div>
</div>

弹性布局-顶部对齐 flex-start

<div class="flex flex-start">
    <div class="flex-item h120">
        1/3大小
    </div>
    <div class="flex-item h80">
        1/3大小
    </div>
    <div class="flex-item h100">
        1/3大小
    </div>
</div>