时间戳

首页 > 解决方案 > 我是 flex 容器的新手，试图创建一个所有行都具有相同高度的网格。需要一些帮助来弄清楚我做错了什么

css - 我是 flex 容器的新手，试图创建一个所有行都具有相同高度的网格。需要一些帮助来弄清楚我做错了什么

问题描述

我似乎无法让元素内的文本缩小。我正在使用 flex 但可以理解为什么元素中的文本不会缩小，即使我告诉它这样做。任何建议都会非常有帮助。

<div  class="tw-flex tw-border">
      <div 
        v-for="(item, index) in cart" 
        class="tw-flex tw-flex-col tw-flex-shrink" 
        :class="{'tw-font-semibold': index==0}"
      >

        <component 
          :is="item.model.link ? 'a':'div'" 
          :href="item.model.link | ''"
          class="tw-border-b tw-w-full tw-flex-grow-0 tw-p-2 "
          :class="[index !== cart.length - 1 ? 'tw-border-r' : '']"
        >
          {{item.model.name}}
        </component>

        <div class=" tw-flex-grow-0 tw-border ">{{item.price}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.frame}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.loadCapacity}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.folding}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.wheels}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.straps}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.kickstand}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.padding}}</div>
        <div class=" tw-flex-grow-0 tw-border ">{{item.hardware}}</div>
      </div>
  </div>

标签： cssvue.jstailwind-css

解决方案

推荐阅读