flex 与 vue-grid-layout 混用代码示例

当使用Flex布局与Vue-grid-layout混用时，可以通过以下代码示例来实现：

HTML模板：

<div id="app">
  <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
    <div v-for="item in items" :key="item.i" :data-grid="item">
      {{ item.i }}
    </div>
  </vue-grid-layout>
</div>

Vue组件：

import VueGridLayout from 'vue-grid-layout';

export default {
  components: {
    VueGridLayout
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 2, i: '1' },
        { x: 4, y: 0, w: 4, h: 4, i: '2' },
        { x: 8, y: 0, w: 4, h: 2, i: '3' }
      ],
      items: [
        { x: 0, y: 0, w: 4, h: 2, i: '1' },
        { x: 4, y: 0, w: 4, h: 4, i: '2' },
        { x: 8, y: 0, w: 4, h: 2, i: '3' }
      ]
    };
  }
};

在上述代码示例中，我们首先引入了`vue-grid-layout`组件，并在Vue组件中注册了该组件。然后，在模板中使用`vue-grid-layout`组件，并通过`v-for`指令遍历`items`数组生成网格布局的子元素。每个子元素都有一个唯一的`i`属性，用于标识该子元素。

同时，我们可以使用Flex布局来对整个网格布局进行样式控制，例如在父容器上设置`display: flex;`来启用Flex布局。