web-dev-qa-db-ja.com

CSS flexbox=同じサイズの子要素を保持

私のsass（コンパスを使用してプレフィックスを取得する）は このフィドルに表示 です。

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)

flexbox grid

ただし、下部の2つのアイテムが上部のアイテムと同じになるようにしたいと思います。

私はそれらを左に浮かせたり、幅を固定したりしたくありません。これは他の解像度での私の配置では機能しません。

どんな提案も歓迎します！

cssflexbox
22
TaylorMac

これを行うには2つの方法があります。

flex-grow：0（ fiddle ）

flex-growを0に設定すると、アイテムに幅を保持して空のスペースを広げるように指示します。 flex-grow: 1を使用すると、アイテムはスペースに合わせて幅を広げます。

不可視アイテム（- フィドル ）

同じflexプロパティを持つ通常のアイテムの後に非表示のアイテムを追加します。左揃えの外観になります。

このソリューションでは、表示されるすべての行に同じ数のアイテムがあるため、大きな画面で適切に機能するために十分な数の非表示のアイテムを追加してください。

27
Igor

イゴールの回答に返信して、彼のソリューションの改善を提案することはできませんが、彼のフィドルはレスポンシブレイアウトに対して完全には機能しませんでした。

flex-grow: 0;を使用した最初のソリューションは、コンテナを埋めるためにアイテムを引き伸ばしません。非表示のアイテムを使用する2番目のソリューションは機能しますが、コンテナーの高さを拡張します。しかし、上/下の余白を削除することでうまくいきました。

私はjsfiddleを編集して、応答性を高め、コンテナー拡張の不可視項目を修正し、変更内容を説明するコメントを使用しました。ただし、コンテナがアイテムの行よりも大きい場合は機能しません：（ fiddle ）

私自身も簡単な解決策を作りました。私は自分でこれをやろうとしていましたが、イゴールのソリューションは非常に役立ちました。 （ フィドル ）

.container {
  display: flex;
  flex-flow: row wrap;
  
  /*style*/
  padding: 0.5em;
  background-color: royalblue;
}
.item {
  flex: 1 0 80px;
  
  /*style*/
  margin: 0.5em;
  padding: 1em;
  text-align: center;
  background-color: lightblue;
}
.filler {
  flex: 1 0 80px;
  height: 0px;
  
  /*style*/
  margin: 0 0.5em;
  padding: 0 1em;
}
<div class="container">
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>

  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>
6
Ray

要素のmax-widthを使用して、アイテムの展開を停止できます（ fiddle ）。それらを左揃えにするには、ラッパーで別のjustify-contentを使用します（ fiddle ）。

これがうまくいくことを願っています！ Chromeでのみこれを見てきました。

2
vvviolet

flex-basis: 50%;およびflex-grow: 1。

.parent {
  display: flex;
  width: 300px;
  height: 300px;
}

.child {
   flex-basis: 50%;
   flex-grow: 1;
   background: tomato;
   border: 1px solid #ccc;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
<div>
2
ken

フレックスベースは最小幅と最大幅によって制限されるため、この場合、最大幅をフレックスベースに等しく設定すると、目的の結果が得られます。

これにより、配置プロパティも保持されます。つまり、行に5つのアイテムがあり、残りの2つのアイテムがある場合、残りのアイテムは引き続きページの中央に正しいサイズで表示されます。

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)
       @include max-width(190px)
1
Ben

この種の問題には、floatを使用します。

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}
0
Nick Retallack