Felx布局在Vue中的使用及举例

<template>
  <div id="app">
    <div class="box">
      <div class="item" v-for="item in 4" :key="item">{{ item }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      // 数据定义（如果需要的话）
    };
  }
};
</script>
 
<style>
.box {
  display: flex; /* 开启Flex布局 */
  flex-wrap: wrap; /* 允许元素换行 */
  justify-content: space-around; /* 水平方向上的分布 */
  align-items: center; /* 垂直方向上的分布 */
}
 
.item {
  width: 100px; /* 设置元素宽度 */
  height: 100px; /* 设置元素高度 */
  margin: 10px; /* 设置外边距 */
  background-color: #f0f0f0; /* 设置背景颜色 */
  border: 1px solid #ccc; /* 设置边框 */
  display: flex; /* 开启Flex布局 */
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
}
</style>

这个例子展示了如何在Vue中使用Flex布局。.box 类被用于包裹 .item 类的元素，以便实现一个简单的网格布局。.item 类定义了每个格子的样式，并且使用Flex布局来在格子内部垂直和水平居中内容。