Vuetify - 替代 flexbox 浮动

Question

我知道这个问题已经得到回答 here 但是我无法让我的图像交替。我正在使用 Vuetify 但覆盖了某些样式，所以我认为这可能与它有关。

我试过同时使用 flex-flow: row-reverse; 和 float: right/left 但没有任何运气..

谁能看出我遗漏了一个明显的错误？

<template>
  <v-card class="mx-auto mt-5 posts-list-item" outlined>
    <v-container class="posts-list-item__content">
      <v-card flat class="posts-list-item__container posts-list-item__image">
        <v-img
          class="pa-2 posts-list-item__img"
          src="https://picsum.photos/510/300?random"
        ></v-img>
      </v-card>
      <v-card
        flat
        class="posts-list-item__container posts-list-item__description"
      >
        <v-card-title class="mb-4 posts-list-item__title">{{
          post.title
        }}</v-card-title>
        <v-card-subtitle class="posts-list-item__subtitle">
          {{ post.content }}
        </v-card-subtitle>


      </v-card>
    </v-container>
  </v-card>
</template>

<style lang="scss">
.posts-list-item {
  &__content {
    display: flex;
  }

  &__container {
    &:nth-of-type(odd) {
      float: left;
    }
    &:nth-of-type(even) {
      float: right;
    }
  }

  &__image {
    width: 33%;
  }

  &__description {
    width: 66%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
  }

Answer 1

我不得不退出 parent 并申请 flex-direction: row-reverse

.posts-list {
  &:nth-child(even) > .posts-list-item > .posts-list-item__content {
    flex-direction: row-reverse;
  }
}

Vuetify - 替代 flexbox 浮动

Vuetfiy - alternate flexbox floats

css

flexbox

vuetify.js

alternate