Question

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

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自动；这意味着它的flex-grow设置为1，而您的.column_wrapper元素则没有。您可以在.column_wrapper中添加width：100％，在v-flex中设置flex-grow：0，也可以在.column_wrapper中添加更大的flex-grow。

更改flex列的宽度？

2 个答案: