改变弹性列的宽度？

Question

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

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

Answer 1

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

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

Answer 2

根据Vuetify ， v-flex 添加了 flex: 1 1 auto; 这意味着它的 flex-grow 设置为 1，而 your.column_wrapper 元素没有。 您可以将 width: 100% 添加到 your.column_wrapper，将 flex-grow: 0 设置为 v-flex 或将更大的 flex-grow 添加到.column_wrapper。