web-dev-qa-db-ja.com

Angular 2マテリアルとフレックスレイアウトの配置

angular 2マテリアルとflex-layoutを使用して、要素のレスポンシブギャラリーを作成しようとしています。何時間も経っても、要素を中央に配置できません： centered

これはソースコードです：

<div fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
  <md-card fxFlex.gt-md="20" fxFlex.md="28"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>
    <img md-card-image src="http://placehold.it/350x200">
    <md-card-content>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>

fxFlexAlign（ https://github.com/angular/flex-layout/wiki/API-Documentation ）にさまざまな値を試しましたが、どれも必要な値を達成していません。つまり、要素を中央に配置するか、言い換えると、右側と左側の間に赤い正方形のスペースを分散させます。

これを達成する方法はありますか？

[〜＃〜]編集[〜＃〜]

残念ながら、justify-content: space-between;動的な数のアイテムがある場合、機能しません。最終的に、それらは新しい行にラップされ、最後の行のアイテムは期待どおりに表示されません。

.container {
  display:flex;
  width:100%;
  flex-flow:row wrap;
  justify-content: space-between;

  
}
.block {
  width:100px;
  height:100px;
  border:1px solid red;
}
<div class="container">
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>
cssangularflexboxangular-material2
5
mario595
<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">

fxLayoutAlign="center"を追加すると、結果が中央に配置されます。

2
Sriram

この概念を試して、同様の機能を実現できます。より完璧な結果を得るには、css％値を編集する必要がある場合があります。

.sp{
        display: flex;
        justify-content: center;
}

.i{
        width: 23%;
    height: 133px;
    background-color: grey;
    margin: 3px;
    color: #fff;

}

.p{
          display: flex;
    flex-wrap: wrap;
    width: 56%;
}
<div class="sp">
  <div class="p">
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
</div>
</div>
1
AmanDeepSharma

答えるのが遅いが、動的アイテムでの作業、正確な式が見つかりません

私の公式は

margin-bottom = (100 - (total item in row * fxFlex on item)) / total space between item in row

例

margin-bottom = (100 - (5 * 19) ) / 4
margin-bottom = (100 - 95) / 4
margin-bottom = 5 / 4 = 1.25%

あなたのコードについて[〜＃〜] html [〜＃〜]

<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="space-between">
    <!-- margin-bottom = gt-md = 1.25%, md = 6.5% , sm  = 22% !-->
    <md-card fxFlex.gt-md="19" fxFlex.md="29"  fxFlex.sm="39" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card">
        <md-card-header>
        <md-card-title>element</md-card-title>
        </md-card-header>
        <img md-card-image src="http://placehold.it/350x200">
        <md-card-content>
        <p>
            Lorem Ipsum
        </p>
        </md-card-content>
    </md-card>
</div>

[〜＃〜] css [〜＃〜]

md-card {
  margin-bottom: 6.25%; // md flex 29

  // this commented margin is the responsive margin calculation you must implement
  // margin-bottom: 1.25%; // gt-md flex 19
  // margin-bottom: 22%; // sm flex 39
  // margin-bttom : 2%; // sm flex 49 better use this one
}
0
Ade Novan

in flexboxブロックプロパティを親ブロックjustify-content: space-between;

.container {
  display:flex;
  width:100%;
  flex-flow:row wrap;
  justify-content: space-between;

  
}
.block {
  width:100px;
  height:100px;
  border:1px solid red;
}
<div class="container">
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>
0
Konstantin Okhotnick