改变弹性列的宽度？答案

【问题标题】：Change width of the flex columns?改变弹性列的宽度？
【发布时间】：2019-11-18 21:58:05
【问题描述】：

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

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

【问题讨论】：

标签： javascript css vue.js vuetify.js

【解决方案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>

【讨论】：

有没有办法让增长和收缩动态化？现在，如果我删除列表项，那么我将所有列表项放在一个地方，现在右侧有空间。
或者如果我想根据数组长度添加弹性或收缩类，那么如果列表项超过一定长度，我们应用增长或收缩，如果不是它保持不变？
哦，我想通了，三元运算符。
@Somethingwhatever 基本上 :shrink='someBoolValue' 应该适合你，但我认为你应该能够用纯 css 解决这个问题

【解决方案2】：

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

【讨论】：