vue flex 布局 2行2列

在Vue中使用Flex布局创建两行两列的效果，你可以利用CSS Flexbox来实现响应式布局。以下是一个简单的示例，假设你有一个名为`items`的数据数组，包含四个元素，代表四张图片或卡片：

HTML部分：

<template>
  <div class="flex-container">
    <div v-for="(item, index) in items" :key="index" :class="{ 'col': true, 'row' + (index % 2) }">
      <div>{{ item.content }}</div> <!-- 这里替换为实际的内容如图片或文本 */}
    </div>
  </div>
</template>

CSS部分（放在单独的`.css`文件中或`<style>`标签内）：

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 让元素换行 */
}

.col {
  flex: 1 0 calc(50% - 10px); /* 设置每列宽度为总宽度的一半减去边距 */
  margin-bottom: 10px; /* 为了给下一行留空间 */
}

.row0, .row1 {
  order: {{ index % 2 }}; /* 奇数行放在左边，偶数行放在右边 */
}

在这个例子中，`.col`类设置了每个子元素的flex基础大小和间距，`.row0` 和 `.row1` 则通过 `order` 属性控制了排列顺序。