当试图以不同高度显示youtube搜索结果时出现问题

Question

我正忙着使用angular4.x开发一个基本的youtube播放器应用程序。我正在使用一个即时搜索组件使用rxjs，当输入字段在400 of的不更改后发生更改时，它会发出请求.

最初，我尝试在col-md-4div中显示搜索结果，以便每行有三个搜索结果。然后我遇到了一个问题，一些缩略图或一些搜索结果的文本有不同的高度，然后转到下一行.

然后，我将柔性盒样式应用到搜索结果中，它似乎更好，但是有些缩略图总是丢失，我现在每行只有两个搜索结果，这里肯定有3-4的空间。

你知不知道我如何才能让它发挥作用?/为什么有些视频缩略图没有显示出来(即使它们是由youtube API返回的)？

我的搜索结果模板：

<div class="eqrow">
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>

我的eqrow样式：

.eqrow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.eqrow > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

我的搜索组件：

import {  Component, OnInit, Output, EventEmitter, ElementRef } from '@angular/core';    
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/distinctUntilChanged';

import { RestService } from '../../services/rest.service';
import { SearchResult } from '../../models/search-result.model';

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" class="form-control" placeholder="Search" [formControl]="term">
  `
})
export class SearchBoxComponent implements OnInit {
  term = new FormControl(); 
  @Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>();

  constructor(private restService: RestService) { }

  ngOnInit(): void {
        this.term.valueChanges.debounceTime(400)
        .distinctUntilChanged()
        .do(() => this.loading.emit(true))         // enable loading
        .switchMap(term => this.restService.search(term))
        .subscribe(
        (results: SearchResult[]) => {
            this.loading.emit(false);
            this.results.emit(results);
        },
        (err) => { 
          console.log(err);
          this.loading.emit(false);
        },
        () => { 
          this.loading.emit(false);
        });
  }
}

Answer 1

我将col-md-4类替换为my-col，它是一个引导类，可能会干扰Flexbox属性。

与添加的justify-content: space-between (to eqrow)和my-col中的flex-basis: 30%一起，我们在项目之间创建了一个排水沟，默认情况下，它们每一行的高度相等，因为align-items/àlign-content默认为stretch。

然后，还可以使用Flexbox属性(也可以是flex和Flexbox)进一步控制它的子my-col容器(嵌套的Flexbox容器)。

小提琴演示

​

.eqrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.eqrow .my-col {
  flex-basis: 30%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  border: 1px dotted gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="eqrow">
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>

​