为什么 align-end 在 vuetify 中不起作用 [英] Why align-end does not work in vuetify

问题描述

我使用 vuetify 布局，我想在右侧制作按钮，但我发现 vuetify 属性的 align-end 不起作用，我使用 offset-xs9要在右侧制作按钮，但按钮在 v-flex 中居中，如何制作?帮助谢谢

代码如下:

<v-app id="inspire"><v-layout row wrap align-end><v-flex xs3 offset-xs9 align-end><div><v-btn 主暗>正常</v-btn>
</v-flex></v-layout></v-app>

和在线代码笔

解决方案

Vuetify 的网格使用 flexbox.

• align-* 在垂直轴上操作
• 你想使用 justify-* 让孩子水平平移
• align-* 和 justify-* 仅适用于 flex 容器，因此您可以使用 v-layout 而不是 v-flex，或者只是在同一个 v-layout
上使用这两个属性

这是一款适合您的固定笔.

I use vuetify layout, and I wanna make button at right side, but I found align-end which is vuetify property does not work, I use offset-xs9 to make button right side, but the button is being center in v-flex, how to make it on end ? help thanks

code like:

<div id="app">
  <v-app id="inspire">

    <v-layout row wrap  align-end>
      <v-flex xs3 offset-xs9 align-end>
        <div>
          <v-btn primary dark>Normal</v-btn>
        </div>
      </v-flex>
    </v-layout>

  </v-app>
</div>

and online codepen

解决方案

Vuetify's grid uses flexbox.

• align-* operates on the vertical axis
• you want to use justify-* for the child to translate it horizontally
• align-* and justify-* only work on flex containers, so you can either use a v-layout instead of the v-flex, or just use both attributes on the same v-layout

Here is a fixed pen for you.

这篇关于为什么 align-end 在 vuetify 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！