SOURCE

console 命令行工具 X clear

                    
>
console
 new Vue({
    data () {
        return {
            basis_1: [
                '1000px',
                '500px',
                '200px',
                '0',
                'auto'
            ],
            dirs: [
              'row',
              'row-reverse',
              'column',
              'column-reverse'
            ],
            wraps: [
              'nowrap', 'wrap', 'wrap-reverse'
            ],
            orders: [1, 4, 3, 2]
        }
    }
}).$mount('#app')
<div id="app">
  <h2>默认状态</h2> 
  <section class="flex">
    <div class="box" v-for="x in 4">75px</div>
  </section>
  <h2>flex-basis:缩放基础值</h2>  
  <section class="flex" v-for="(basis, index) in basis_1" :key="'b1' +index">
    <div class="box flex-1" :style="{'flex-basis': basis}">flex-basis: {{basis}}</div>
    <div class="box flex-1" v-for="x in 3">flex-1</div>
  </section>
  <h2>flex-grow:增长系数</h2>
  <h3>默认为: 1</h3>
  <section class="flex">
    <div class="box" v-for="i in 4" :style="{'flex-grow': 1}">flex-grow: 1</div>
  </section>
  <section class="flex">
    <div class="box" v-for="i in 4" :style="{'flex-grow': i - 1}">flex-grow: {{i - 1}}</div>
  </section>
  <h2>flex-shrink:收缩系数</h2>
  <h3>默认为: 1</h3>
  <section class="flex">
    <div class="box" v-for="i in 4" :style="{width: '300px'}">width: '300px'</div>
  </section>
  <section class="flex">
    <div class="box" v-for="i in 4" :style="{width: '300px', 'flex-shrink': i - 1}">flex-shrink: {{i - 1}}</div>
  </section>
  <h2>flex-direction: 主轴方向</h2>
  <template v-for="dir in dirs">
    <h3>{{dir}}</h3>
    <section class="flex" :style="{'flex-direction': dir}">
      <div class="box" v-for="x in 4">{{x}}</div>
    </section>
  </template>
  <h2>flex-wrap: 换行方式</h2>
  <template v-for="wrap in wraps">
    <h3>{{wrap}}</h3>
    <section class="flex" :style="{'flex-wrap': wrap}">
      <div class="box" v-for="x in 15">{{x}}</div>
    </section>
  </template>
  <h2>order: 排序</h2>
  <section class="flex">
    <div class="box flex-1" :style="{'order': order}" v-for="(order, index) in orders" :key="order">index:{{index}}, order:{{order}}</div>
  </section>
</div>
section {
    background-color: #ddd;
    width: 1000px;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}
.box {
    height: 75px;
    width: 75px;
    background-color: lightblue;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
}

本项目引用的自定义外部资源