两排 Flex 卡答案

【问题标题】：Flex card with two rows两排 Flex 卡
【发布时间】：2018-11-25 03:51:41
【问题描述】：

我有一张用于图像的卡片。我想在我的卡片中有两行用于图像。这背后的概念是，我得到不同的产品图像，我在一行中正确显示。在下一行，我想展示第一个产品的所有图像。但我没有正确对齐。

当前，我正在将所有图像排成一行。我想在下一行显示类中包含的所有图像。

有人可以帮我解决这个 CSS 问题吗？下面是我的代码。

HTML：

.image-card {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  flex-direction: row;
}

.contain {
  display: flex;
  flex-direction: row;
}

.child {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.child>img {
  width: 100px;
  height: 100px;
}

img {
  width: 100px;
  height: 150px;
}

<md-card class="image-card">
  <div *ngFor="let url of this.urls">
    <img [src]="url" (click)="openDialog(url)">
    <div class="button-row">
      <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
              {{ url.slice(59, 66) }}
            </a>
    </div>
  </div>
  <div class="contain">
    <div class="child">
      <img [src]="this.secondImage">
      <img [src]="this.thirdImage">
      <img [src]="this.fourthImage">
      <img [src]="this.logo">
      <img [src]="this.brandImage">
    </div>
  </div>
</md-card>

【问题讨论】：

你能做一个小提琴吗？
你不能只给.contain 100% 的宽度 - 然后它会下降到下一行吗？

标签： html angular css flexbox

【解决方案1】：

按照下面的建议使用 flex

.image-card {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  flex-direction: column;
}

.image-card .abc {
  width: 100%;
  max-height: 225px;
  overflow-x: auto;
  margin-top: 10px;
}

.contain {
  display: flex;
  flex-direction: row;
}

.child {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.child>img {
  width: 100px;
  height: 100px;
}

img {
  width: 100px;
  height: 150px;
}

<md-card>
  <div class="image-card">
    <div *ngFor="let url of this.urls" class="abc">
      <div>
        <img [src]="url" (click)="openDialog(url)">
        <div class="button-row">
          <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
                {{ url.slice(59, 66) }}
              </a>
        </div>
      </div>
      <div class="contain">
        <div class="child">
          <img [src]="this.secondImage">
          <img [src]="this.thirdImage">
          <img [src]="this.fourthImage">
          <img [src]="this.logo">
          <img [src]="this.brandImage">
        </div>
      </div>
    </div>
    <div *ngFor="let url of this.urls" class="abc">
      <div>
        <img [src]="url" (click)="openDialog(url)">
        <div class="button-row">
          <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
                {{ url.slice(59, 66) }}
              </a>
        </div>
      </div>
      <div class="contain">
        <div class="child">
          <img [src]="this.secondImage">
          <img [src]="this.thirdImage">
          <img [src]="this.fourthImage">
          <img [src]="this.logo">
          <img [src]="this.brandImage">
        </div>
      </div>
    </div>
    <div *ngFor="let url of this.urls" class="abc">
      <div>
        <img [src]="url" (click)="openDialog(url)">
        <div class="button-row">
          <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
                {{ url.slice(59, 66) }}
              </a>
        </div>
      </div>
      <div class="contain">
        <div class="child">
          <img [src]="this.secondImage">
          <img [src]="this.thirdImage">
          <img [src]="this.fourthImage">
          <img [src]="this.logo">
          <img [src]="this.brandImage">
        </div>
      </div>
    </div>

  </div>
</md-card>

【讨论】：

Nandita，它对我来说很有效，但我正在为每个我不想要的 for 循环获取 div 类图像。我正在努力解决那个问题……让我们看看……谢谢！
可能是一些服务器问题。没关系，:)
Nandita..你知道如何为整张卡片添加滚动条吗？我正在尝试将其放入图像卡中，但它显示在两行之间...
更新答案请查看
我试过了，但问题是滚动条出现在整张卡片的两行之间......就像我们通常做任何卡片一样......

【解决方案2】：

用div 包裹ngFor 并将class="image-card" 应用到它

.image-card {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  flex-direction: row;
}

.contain {
  display: flex;
  flex-direction: row;
}

.child {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.child>img {
  width: 100px;
  height: 100px;
}

img {
  width: 100px;
  height: 150px;
}

<md-card class="">
  <div class="image-card">
    <div *ngFor="let url of this.urls">
      <img [src]="url" (click)="openDialog(url)">
      <div class="button-row">
        <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
              {{ url.slice(59, 66) }}
            </a>
      </div>
    </div>
  </div>
  <div class="contain">
    <div class="child">
      <img [src]="this.secondImage">
      <img [src]="this.thirdImage">
      <img [src]="this.fourthImage">
      <img [src]="this.logo">
      <img [src]="this.brandImage">
    </div>
  </div>
</md-card>

【讨论】：

非常感谢 Gautam...成功了！！！是否可以在整个卡片上添加水平滚动？目前它很乱......