【问题标题】:Why align-end does not work in vuetify为什么 align-end 在 vuetify 中不起作用
【发布时间】:2018-02-14 07:18:45
【问题描述】:

我使用 vuetify 布局,我想在右侧制作按钮,但我发现 align-end 这是 vuetify 属性不起作用,我使用 offset-xs9 制作按钮右侧,但按钮在 @ 居中987654324@,怎么搞定?帮忙谢谢

代码如下:

<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>

online codepen

【问题讨论】:

    标签: vuetify.js


    【解决方案1】:

    Vuetify 的网格使用flexbox

    • align-* 在垂直轴上运行
    • 您想为孩子使用justify-* 水平翻译它
    • align-*justify-* 仅适用于弹性容器,因此您可以使用 v-layout 而不是 v-flex,或者只在同一个 v-layout 上使用这两个属性

    这是给你的fixed pen

    【讨论】:

    • 谢谢您,先生,您为我节省了很多时间
    • 这是一个很好的答案。不过有一条评论,justify 在主方向轴上工作,align 在辅助轴上工作。使用row时,主轴是水平的,辅助是垂直的。使用column 时,情况正好相反(例如:&lt;v-layout row&gt; ... &lt;/v-layout&gt;&lt;v-layout column&gt; ... &lt;/v-layout&gt;。不明白“使用v-layout 而不是v-flex。你需要在@987654339 中使用v-flex @.
    【解决方案2】:

    这里的凯尔回答很好,但我觉得这里还有更多需要解释的地方。

    这里的第一个问题是使用xs3 offset-xs9:

    <v-flex xs3 offset-xs9 align-end>
    

    这将不允许我们使用flexbox 网格系统将内容放置在有意义的位置(如您所描述的那样)。

    第二个问题是正确使用了 Vuetify 的 flexbox 网格属性,例如,在 v-layoutv-flex 上都使用了 align-end

    <v-layout row wrap  align-end>
          <v-flex xs3 offset-xs9 align-end>
    

    这就是我们所追求的:

    1. 将所有内容放在其自身最右侧的布局
    2. 一个只占用其内容所需大小的容器

    实现这两个目标,将确保您的内容将放置在v-layout容器的右端,并且您将避免使用xs3offset-xs-9等各种奇怪的空间。

    所以,对于 v-layout,正如 Kael 提到的,我们需要使用 justtify-end。由于您的v-layout 的方向是row,所以我们使用justify 进行水平定位。

    对于v-flex,我们需要确保它只占用其内容的宽度。我们将为此使用shrink,因此最终模板应如下所示:

    <div id="app">
      <v-app id="inspire">
    
        <v-layout row wrap justify-end>
          <v-flex shrink>
            <v-btn primary dark>Normal</v-btn>
          </v-flex>
        </v-layout>
    
      </v-app>
    </div>
    

    【讨论】:

      【解决方案3】:

      您必须在&lt;v-flex&gt; 标签中使用text-xs-right 而不是align-end(参见https://vuetifyjs.com/ru/layout/alignment)。

      【讨论】:

      • text-*-right 用于对齐文本。不是 flexbox 容器。这是一个非常糟糕的做法。请参阅 Kael Watts 的答案以获得更好的解决方案。
      【解决方案4】:

      您也可以使用 v-spacer 将任何东西推到右侧。

      <div id="app">
        <v-app id="inspire">
      
          <v-layout>
            <v-spacer></v-spacer>
            <v-btn primary dark>Normal</v-btn>
          </v-layout>
      
        </v-app>
      </div>
      

      【讨论】:

        【解决方案5】:

        如果你想将你的元素对齐到右下角,你可以这样做:

        <v-img height="120px" class="white--text" :src="xxxx.img">
            <v-layout fill-height column ma-0 >
              <v-spacer></v-spacer>
              <v-flex class="text-xs-right" shrink>
                <span class="grey darken-4">XXXXX</span>
              </v-flex>
            </v-layout>
        </v-img>
        

        【讨论】:

          【解决方案6】:

          试试这个:

          <p class="text-xs-right">
                <v-btn class="d-inline-block">Normal</v-btn>
          </p>
          

          【讨论】:

          • add对你的回答做一些解释
          • 这是错误的方法。您将容器转换为inline-flex,然后将容器视为带有text-*-rightinline 文本持有者。在这里查看 Kael 的答案。
          猜你喜欢
          • 2018-03-12
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2016-08-14
          • 1970-01-01
          • 2022-01-17
          • 2021-12-25
          • 2018-12-07
          相关资源
          最近更新 更多