Использование V-flex в V-Card не работает должным образом - PullRequest
Новая
       46

Использование V-flex в V-Card не работает должным образом

0 голосов
/ 22 апреля 2020

Итак, я пытался создать V-Card в vuetify с указанным c макетом. Верхняя часть карты будет различаться по размеру, и поэтому я должен иметь возможность выровнять нижнюю часть карты с нижней.

Итак, я попытался сделать следующий код здесь, который должен позволить первая часть, чтобы «расти», чтобы заполнить высоту, а затем вторая часть, чтобы «сжаться» и остаться на дне ...

Однако, безуспешно .. Я, вероятно, просто сделал что-то не так здесь, но я Вытаскиваю мои волосы ...

Вот мой код: 

<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
  <v-layout column>
    <v-flex grow>
      {{ skinName }}
      <v-img :src="skinImage" />
    </v-flex>
    <v-flex shrink>
      <v-chip
        class="ma-2"
        color="indigo"
        text-color="white"
      >
        <img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
      </v-chip>
    </v-flex>
  </v-layout>
</v-container>

enter image description here

Как вы можете Посмотрите на мое изображение, синие «монеты» должны выровняться внизу в одном и том же месте, независимо от размера текста над ним!

Дайте мне знать, если вам нужна дополнительная информация.

1 Ответ

1 голос
/ 22 апреля 2020

Ваш контейнер не заполняет высоту карты, поэтому нет «пустого места» для перераспределения flexbox. Вы можете использовать атрибут fill-height как для макета, так и для элемента контейнера, чтобы убедиться, что он растягивается.

...