web-dev-qa-db-ja.com

Angular ngForを使用したflex-layout

私はflex-layoutに非常に慣れておらず、以下を修正するのに問題があります。

https://github.com/angular/flex-layout

私のngFor：

<div fxLayout.xs="column">
 <country fxFlex *ngFor="let country of countries" [country]="country"></country>
</div>

結果：

enter image description here

3か国だけを続けて表示したい場合、つまり最後の「ドイツ」を次の行に配置したい場合はどうなりますか？

これは、複数のfxLayoutを作成することによってのみ可能ですか？つまり、2つのループを意味します。1つはfxLayoutの数を作成し、もう1つの内部ループは私の国のコンポーネントを表示します（fxFlexアイテム）。前もって感謝します！

cssangulartypescriptflexbox
11
Jdruwe

私は次の場所で解決策を見つけました： Flexboxのメディアクエリを使用して行あたりのアイテム数を制御する方法は？

HTML：

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap">
  <country fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let country of countries" [country]="country"></country>
</div>

TypeScript：

//I use this to show of expression bindings in flex-layout and because I don't want the calculated value in the HTML.
regularDistribution = 100 / 3;

折り返し：複数行/ ltrの左から右; rtlで右から左へ

ここで重要なのはfxLayoutWrap = "wrap"です

10
Jdruwe

angular 6と新しいバージョンのflex-layoutを使用すると、コードは次のようになります。

<div fxLayout="row wrap">
   ...
</div>
3
x64vs32x