Flex flex布局

效果

使用方法

<template>
  <div>
    <lc-title title="flex布局"></lc-title>
    <category title="基础布局"></category>
    <div class="box-item">
      <lc-row>
        <lc-col :span="12">
          <div class="flex-content">span:12</div>
        </lc-col>
        <lc-col :span="12">
          <div class="flex-content flex-content-light">span:12</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row>
        <lc-col :span="8">
          <div class="flex-content">span:8</div>
        </lc-col>
        <lc-col :span="8">
          <div class="flex-content flex-content-light">span:8</div>
        </lc-col>
        <lc-col :span="8">
          <div class="flex-content">span:8</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row>
        <lc-col :span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">span:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
        <lc-col :span="myValue">
          <div class="flex-content flex-content-light">span:{{myValue}}</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row>
        <lc-col :span="4">
          <div class="flex-content">span:4</div>
        </lc-col>
        <lc-col :span="4">
          <div class="flex-content flex-content-light">span:4</div>
        </lc-col>
        <lc-col :span="4">
          <div class="flex-content">span:4</div>
        </lc-col>
        <lc-col :span="4">
          <div class="flex-content flex-content-light">span:4</div>
        </lc-col>
        <lc-col :span="4">
          <div class="flex-content">span:4</div>
        </lc-col>
        <lc-col :span="4">
          <div class="flex-content flex-content-light">span:4</div>
        </lc-col>
      </lc-row>
    </div>

    <category title="设置元素间距"></category>
    <div class="box-item">
      <lc-row :gutter="10">
        <lc-col :span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">span:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">span:6</div>
        </lc-col>
      </lc-row>
    </div>

    <category title="Flex布局"></category>
    <h6>wrap（是否换行）</h6>
    <div class="box-item">
      <lc-row type="flex" flexWrap="nowrap" :gutter="10">
        <lc-col :span="6">
          <div class="flex-content">1</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">2</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">3</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">4</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">5</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">7</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" flexWrap="wrap" :gutter="10">
        <lc-col :span="6">
          <div class="flex-content">1</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">2</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">3</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">4</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">5</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">7</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" flexWrap="reverse" :gutter="10">
        <lc-col :span="6">
          <div class="flex-content">1</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">2</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">3</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">4</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">5</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">7</div>
        </lc-col>
      </lc-row>
    </div>
    <h6>justify（主轴方向）</h6>
    <div class="box-item">
      <lc-row type="flex">
        <lc-col :span="6">
          <div class="flex-content">start</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">start</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">start</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" justify="center">
        <lc-col :span="6">
          <div class="flex-content">center</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">center</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">center</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" justify="end">
        <lc-col :span="6">
          <div class="flex-content">end</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">end</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">end</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" justify="space-between">
        <lc-col :span="6">
          <div class="flex-content">between</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">between</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">between</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" justify="space-around">
        <lc-col :span="6">
          <div class="flex-content">around</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">around</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">around</div>
        </lc-col>
      </lc-row>
    </div>
    <h6>align（侧轴方向）</h6>
    <div class="box-item">
      <lc-row type="flex" gutter="10" align="flex-start">
        <lc-col :span="6">
          <div class="flex-content flex-content-height">1</div>
        </lc-col>
        <lc-col :span="12">
          <div class="flex-content flex-content-light">顶部对齐 -- flex-start</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-height">3</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" gutter="10" align="center">
        <lc-col :span="6">
          <div class="flex-content flex-content-height">1</div>
        </lc-col>
        <lc-col :span="12">
          <div class="flex-content flex-content-light">居中对齐 -- center</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-height">3</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex" gutter="10" align="flex-end">
        <lc-col :span="6">
          <div class="flex-content flex-content-height">1</div>
        </lc-col>
        <lc-col :span="12">
          <div class="flex-content flex-content-light">底部对齐 -- flex-end</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-height">3</div>
        </lc-col>
      </lc-row>
    </div>

    <category title="分栏偏移"></category>
    <div class="box-item">
      <lc-row type="flex">
        <lc-col :offset="6" span="6">
          <div class="flex-content">offset:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content flex-content-light">span:6</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex">
        <lc-col span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
        <lc-col :offset="8" :span="6">
          <div class="flex-content flex-content-light">offset:8</div>
        </lc-col>
        <lc-col :span="6">
          <div class="flex-content">span:6</div>
        </lc-col>
      </lc-row>
    </div>
    <div class="box-item">
      <lc-row type="flex">
        <lc-col span="6" :offset="6">
          <div class="flex-content">offset:6</div>
        </lc-col>
        <lc-col :span="6" :offset="6">
          <div class="flex-content">offset:6</div>
        </lc-col>
      </lc-row>
    </div>
  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
      return {
          myValue:4
      };
  },
  methods:{
    text(){
      this.myValue++;
    }
  }
};
</script>

<style lang="less" scoped>
.box-item {
  background: #fff;
  margin-bottom: 20px;
  padding: 20px 20px 10px;
  border: 1px solid #ddd;
}
.demo .lc-col {
  margin-bottom: 10px;
}
.flex-content {
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  background: #78a4f4;
  &.flex-content-light {
    background: #93b6f6;
  }
  &.flex-content-height {
    height: 50px;
  }
}
h6{ line-height: 30px; font-size: 14px; padding-left: 30px;}
</style>

可配置参数

row

字段	说明	类型	默认值
type	布局方式，可选值为flex	String	-
gutter	列元素之间的间距（单位为px）	String/Number	-
tag	自定义元素标签	String	div
justify	Flex 主轴对齐方式，可选值为 start end center space-around space-between	String	start
align	Flex 交叉轴对齐方式，可选值为 flex-start center flex-end	String	flex-start
flexWrap	Flex是否换行，可选值为 nowrap wrap reverse	String	nowrap

col

字段	说明	类型	默认值
span	列元素宽度	String/Number	-
offset	列元素偏移距离	String/Number	-