如何使Vuetify v-flex占据剩余的可用空间

阿克沙伊

我在v-layout(fill-height)内部有两个flex。问题:第二个Flex对齐到预期的末端,但是第一个Flex并未占用剩余的可用空间。

  <v-container>
      <v-layout row wrap fill-height>
        <v-flex
          xs12
          class="white--text green darken-3"
        >
            <v-card-text>I should occupy rest of the available space</v-card-text>
        </v-flex>
        <v-flex
          xs12
          align-self-end
          class="white--text blue darken-3"
        >   

        </v-flex>
      </v-layout>
    </v-container>

Codepen:

https://codepen.io/adatdeltax/pen/MWaapYR?editors=1000

我是刚接触Vuetify的人,上面的Codepen是我到目前为止尝试过的方法,有没有办法使flex1占用剩余的可用空间。

齐姆

随着Vuetify 1.5

使用column然后取下xs12道具。然后收缩/增长将按预期工作(没有额外的CSS或内联样式):

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout column fill-height>
        <v-flex
          grow
          class="white--text green darken-3"
        >
            <v-card-text>
              I should occupy rest of the available space
            </v-card-text>
        </v-flex>
        <v-flex
          shrink
          align-self-end
          class="white--text blue darken-3"
        >   
            <v-card-text>
              I should stay here
            </v-card-text>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

1.5演示:https : //codeply.com/p/JjD6UZdtjU


使用Vuetify 2.x

除了v-row, v-col使用代替以外,工作原理相同v-layout, v-flex

<div id="app">
    <v-app>
        <v-container class="fill-height">
            <v-row class="no-gutters flex-wrap flex-column fill-height">
                <v-col cols="auto" class="grow pink pa-2">
                    <h1>Content</h1>
                </v-col>
                <v-col cols="auto" class="shrink blue pa-2"> Footer </v-col>
            </v-row>
        </v-container>
    </v-app>
</div>

2.x演示:https//codeply.com/p/07CA4jZNAl

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

lmdb:如何确定剩余可用空间?

如何使输入占据flex容器中的所有剩余宽度?

如何从Vuetify.js中的v-btn删除内部空间?

Vuetify v-flex宽度规格

在多页上打印时,如何使HTML表格页脚占据每页上的可用空间?

如何使vuetify v-data-table垂直跨越所有可用空间

如何在<v-treeview> Vuetify中添加新节点

我如何设置v-rating固定在vuetify?

Vuetify V-flex仅卡满一半

如何避开Vuetify的v-select内部状态

使用VueJS和Vuetify如何在v-flex中将v-switch垂直和水平居中?

如何在vuetify中创建可滚动的v-list?

vuetify v-checkbox中如何检查和不确定?

如何从Vuetify的<v-form>组件中提取<form>元素

如何使用vuetify v-rating事件?

如何在不指定div宽度的情况下使div占据所有可用的剩余水平空间?

如何使有角度的材料卡占据可用的垂直空间并使其内容可滚动

如何在Vuetify中更改v-text-field宽度?

如何在vuetify中删除v-btn背景?

如何在vuetify中将图像添加到v卡

如何使Vuetify v-card-text单行?

如何使用Vuetify创建连续的v-slide-group?

如何获得Vuetify v-img的naturalSize?

如何计算剩余的可用垂直空间

如何清除v-data-table中的选定行,Vuetify

EditText如何占据布局中的所有剩余空间?

如何设置权重以使底视图占据Android的剩余空间

如何使此菜单占据所有剩余空间的宽度?

如何使输入元素占据固定宽度元素旁边的可用空间?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档