flex.css布局

1、为什么需要flex.css?

在移动端开发中，并不是所有的浏览器，webview，微信等各种版本都支持标准的flex，
但是基本上都会支持-webkit-box，所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-box。
由于flex.css采用了autoprefixer编译，所以能够保证在浏览器不支持标准flex布局的情况下，
回滚到旧版本的-webkit-box，保证移动设备中能呈现出一样的布局效果。
于是，一款移动端快速布局的神器诞生了...

2、安装

npm install --save flex.css

3、设置主轴方向

<template>
  <div>
    <h2>从上到下</h2>
    <div class="box" flex="dir:top">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>从右到左</h2>
    <div class="box" flex="dir:right">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>从下到上</h2>
    <div class="box" flex="dir:bottom">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>从左到右（默认）</h2>
    <div class="box" flex="dir:left">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
}
.item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
</style>

image.png

4、主轴对齐方式

<template>
  <div>
    <h2>从右到左</h2>
    <div class="box" flex="main:right">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>从左到右（默认）</h2>
    <div class="box" flex="main:left">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>两端对齐</h2>
    <div class="box" flex="main:justify">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>居中对齐</h2>
    <div class="box" flex="main:center">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
}
.item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
</style>

image.png

5、交叉轴对齐方式

<template>
  <div>
    <h2>从上到下（默认）</h2>
    <div class="box" flex="cross:top">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>从下到上</h2>
    <div class="box" flex="cross:bottom">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>基线对齐</h2>
    <div class="box" flex="cross:baseline">
        <div class="item" style="font-size: 30px; background: red;">1</div>
        <div class="item" style="font-size: 12px; background: blue;">2</div>
        <div class="item" style="font-size: 40px; background: #000;">3</div>
    </div>
    <h2>居中对齐</h2>
    <div class="box" flex="cross:center">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>高度并排铺满</h2>
    <div class="box" flex="cross:stretch">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100px;
    border: 1px solid #ddd;
}
.item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
</style>

image.png

6、子元素设置

<template>
  <div>
    <h2>子元素平分空间</h2>
    <div class="box" flex="box:mean">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>第一个子元素不要多余空间，其他子元素平分多余空间</h2>
    <div class="box" flex="box:first">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>最后一个子元素不要多余空间，其他子元素平分多余空间</h2>
    <div class="box" flex="box:last">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
    <h2>两端第一个元素不要多余空间，其他子元素平分多余空间</h2>
    <div class="box" flex="box:justify">
        <div class="item" style="background: red;">1</div>
        <div class="item" style="background: blue;">2</div>
        <div class="item" style="background: #000;">3</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100px;
    border: 1px solid #ddd;
}
.item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
</style>

image.png

7、flex-box元素剩余空间比例分配

<template>
  <div>
    <h2>flex-box实现两端不需要多余空间，中间占满剩余空间</h2>
    <div class="box" flex>
        <div class="item" flex-box="0" style="background: red;">1</div>
        <div class="item" flex-box="1" style="background: blue;">2</div>
        <div class="item" flex-box="0" style="background: #000;">3</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100px;
    border: 1px solid #ddd;
}
.item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
</style>

image.png