Question

我正在尝试将填充高度用于v-flex，但似乎不起作用。不确定我缺少什么。

这是codepen：https://codepen.io/ccasad/pen/MMEORo

我希望紫色框的底部与橙色框的底部对齐，而青色框的底部与橙色框的底部对齐。

  <v-container fluid grid-list-lg text-xs-center>

    <v-layout row wrap>

      <v-flex d-flex xs6 style="background-color:green;">
          Top left
      </v-flex>
      <v-flex d-flex xs6 style="background-color:blue;">
          Top right
      </v-flex>

      <v-flex d-flex xs3 fill-height style="background-color:purple;">
          Bottom left
      </v-flex>
      <v-flex d-flex xs6 style="background-color:tan;">
        <v-layout row wrap>
          <v-flex d-flex xs12 style="background-color:yellow;">
              Bottom middle top<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:red;">
              Bottom middle middle<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:orange;">
              Bottom middle bottom<br>more text
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex d-flex xs3 fill-height style="background-color:cyan;">
          Bottom right
      </v-flex>
    </v-layout>

  </v-container>

Answer 1

不确定是否有帮助，但是您可以将div替换为v-flex并使用display：flex为其设置样式

<div id="app">
  <v-app id="inspire">    
  <v-container fluid grid-list-lg text-xs-center>        
    <v-layout row wrap>
      <v-flex d-flex xs6 style="background-color:green;">
          Top left
      </v-flex>
      <v-flex d-flex xs6 style="background-color:blue;">
          Top right
      </v-flex>
      <div xs3 fill-height style="background-color:purple;display:flex;align-items:stretch;align-contents:stretch;flex-grow:1;">
          Bottom left
      </div>
      <v-flex d-flex xs6 style="background-color:tan;">
        <v-layout row wrap>
          <v-flex d-flex xs12 style="background-color:yellow;">
              Bottom middle top<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:red;">
              Bottom middle middle<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:orange;">
              Bottom middle bottom<br>more text
          </v-flex>
        </v-layout>
      </v-flex>
      <div xs3 fill-height style="background-color:cyan;display:flex;align-items:stretch;align-contents:stretch;flex-grow:1;">
          Bottom right
      </div>
    </v-layout>
  </v-container>

Answer 2

只需从紫色和青色fill-height元素中删除v-flex属性。

PS-v-flex没有fill-height属性

PPS-v-flex也没有d-flex属性，因此也要删除它

在这种情况下，如何使v-flex正确使用填充高度？

2 个答案: