时间戳

首页 > 解决方案 > 改变弹性列的宽度？

javascript - 改变弹性列的宽度？

问题描述

我有 2 个列表列，在其中一个列中，我有一个列表，我使用 CSS 将其分解，以便在特定高度之后将数据包装在下一列中。但是如果你看演示，你会发现第一列和第二列之间有很多空白。我不确定如何才能使列表项占据空白？

new Vue({
  el: '#app',
  data() {
    return {
      lists: [{
          text: 'list1'
        },
        {
          text: 'list2'
        },
        {
          text: 'list3'
        },
        {
          text: 'list4'
        },
        {
          text: 'list5'
        },
        {
          text: 'list6'
        },
        {
          text: 'list7'
        },
        {
          text: 'list8'
        },
        {
          text: 'list9'
        },
        {
          text: 'list10'
        },
        {
          text: 'list10'
        },
        {
          text: 'list2'
        },
        {
          text: 'list3'
        },
        {
          text: 'list4'
        },
        {
          text: 'list5'
        },
        {
          text: 'list6'
        },
        {
          text: 'list7'
        },
        {
          text: 'list8'
        },
        {
          text: 'list9'
        },
        {
          text: 'list10'
        },
        {
          text: 'list10'
        },
        {
          text: 'list10'
        },
        {
          text: 'list10'
        },
        {
          text: 'list2'
        },
        {
          text: 'list3'
        },
        {
          text: 'list4'
        },
        {
          text: 'list5'
        },
        {
          text: 'list6'
        },
        {
          text: 'list7'
        },
        {
          text: 'list8'
        },
        {
          text: 'list9'
        },
        {
          text: 'list10'
        },
        {
          text: 'list10'
        },
      ]
    }
  }
})
.column_wrapper {
  display: flex;
  max-height: 100px;
  flex-flow: column wrap;
}
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-text>
        <v-layout>
          <v-flex>
            <h2>This is the first Column And there is a lot of space in between.</h2>
          </v-flex>
          <v-flex class="column_wrapper">
            <div v-for="list in lists" :key="list">
              <span class="title">{{list.text}}</span>
            </div>
            </h1>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-app>
</div>

现在，列表似乎只向右增长。我怎样才能使它两边均匀地增长或收缩？

标签： javascriptcssvue.jsvuetify.js

解决方案

这很简单。将收缩属性添加到要占用更少空间的块中：

    <v-flex shrink>
     <h2>This is the first Column And there is a lot of space in between.</h2>
    </v-flex>

并成长为您想要更多的人：

    <v-flex class="column_wrapper" grow>
        <div v-for="list in lists" :key="list">
        <span class="title">{{list.text}}</span>
      </div>    
      </h1>         
    </v-flex>
  </v-layout>

推荐阅读