行不使用SASS包装

Question

我正在努力实现这个目标

html代码

<div class="pro" *ngFor="let home of homeds">
  <div *ngFor="let homer of home.teachers">
     <img src="{{ homer.img }}" alt="">
  </div>
</div>

我的SASS代码

.pro{
    img{
        display: flex;
        flex-flow: row wrap;
    }
}

而不是顶部的第一张图片这是我得到的

Answer 1

您的display: flex规则似乎是错误的元素。我对角度不太熟悉，但我想最终的HTML看起来像这样：

<div class="pro">
    <div>
        <img src="home_teacher_1.jpg" alt="">
        <img src="home_teacher_2.jpg" alt="">
        <img src="home_teacher_3.jpg" alt="">
        <img src="home_teacher_4.jpg" alt="">
    </div>
</div>

如果是这种情况，您希望display: flex上的flex-flow: row wrap和.pro div不是.pro img。

＆＃13;

＆＃13;

.pro {
    width: 1000px;
}

.pro div {
    display: flex;
    flex-flow: row wrap;
}

＆＃13;

<div class="pro">
    <div>
        <img src="http://lorempixel.com/500/500/nature" alt="">
        <img src="http://lorempixel.com/500/500/nature" alt="">
        <img src="http://lorempixel.com/500/500/nature" alt="">
        <img src="http://lorempixel.com/500/500/nature" alt="">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用你的html标记你需要修改sass

.pro{
    display:flex;
    flex-flow:row wrap;
    >div {max-width:50%;flex:1 1 100%;}
    img{
        width:100%;
    }
}