Vuetify中如何拉开v-flex元素间距并将按钮右对齐？

嘿，我来帮你搞定这两个布局小问题！针对你的需求，我分两步给出具体的解决方案：

1. 拉开图片与内容区域的间距 #

Vuetify的栅格系统自带多种间距控制方式，这里推荐两种简单易用的方法：

• 方法一（推荐）：给外层的v-layout添加gutter属性，它会自动在列与列之间添加符合设计规范的间距，代码更简洁。
• 方法二：给右侧的v-flex添加左内边距类（比如pl-5，数值从1到12可自由调整），或者给左侧v-flex加右外边距（mr-4），灵活控制间距大小。

我下面的示例用方法一演示，更贴合Vuetify的设计逻辑。

2. 将「加入购物车」按钮置于内容区域最右侧 #

要让按钮靠右对齐，只需要把按钮放在一个右对齐的容器里即可：

• 最简单的方式是给按钮的父容器添加text-right类，直接实现文本右对齐；
• 如果你更喜欢用flex布局控制，也可以用v-layout row justify-end包裹按钮，通过flex的对齐属性实现靠右效果。

修改后的完整代码 #

<template>
  <div>
    <v-container>
      <!-- 添加gutter属性实现列间距 -->
      <v-layout row wrap gutter>
        <v-flex xs12 sm6 md5 lg5>
          <v-img class="white--text" height="350px" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" />
        </v-flex>
        <v-flex xs12 sm6 md7 lg7>
          <p class="subheading font-weight-light grey--text text--darken-1 mb-1">Samsung</p>
          <p class="display-1 font-weight-light">OnePlus 3</p>
          <p class="subheading" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p class="headline font-weight-medium">$329</p>
          <p class="muted">Inclusive of all taxes. Free home delivery.</p>
          <!-- 添加text-right类让按钮靠右 -->
          <div class="text-right">
            <v-btn color="yellow">
              <v-icon left>shopping_cart</v-icon>Add to Cart
            </v-btn>
          </div>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

额外小提示 #

• 如果觉得gutter的默认间距不够，你可以给两个v-flex分别添加mx-*类（比如左侧加mr-4，右侧加ml-4），进一步拉大间距；
• 若想用flex布局实现按钮靠右，也可以把按钮容器改成这样：

  <v-layout row justify-end>
    <v-btn color="yellow">
      <v-icon left>shopping_cart</v-icon>Add to Cart
    </v-btn>
  </v-layout>
  

内容的提问来源于stack exchange，提问作者Issaki