web-dev-qa-db-ja.com

CSS flexbox動的サイズ変更：最大幅を優先

行flexboxラップするコンテナがあります。
その中のアイテムで、私は設定します：

  • flex: 1;そのため、アイテムはコンテナを水平方向に埋めるように成長します
  • min-width: X; max-width: Y;'アイテムは許容範囲内に収まります。

これは簡単なコードペンの例です 。

問題（この例で見られる）は、resize-wrapの動作です。

どうなるか：
各アイテムは可能な限り小さいので、それらの最大数が最初の行に配置され、行を埋めるために必要なだけ成長します。したがって、アイテムのmax-widthはほとんど到達されず、アイテムはmin-width。

探しているもの：
各アイテムは可能な限り大きいため、それらの最小数が最初の行に配置され、新しいアイテムを追加して行を埋めるのに必要なだけ縮小されます。したがって、アイテムのmin-widthはほとんど到達されず、アイテムはmax-width。

言い換えると：
1行あたりのアイテムの最大数ではなく、最小数が必要です。

JSなしでCSSでそれを行う方法はありますか？

ありがとう！

css3flexbox
21
Salomon BRYS

あなたが探しているのはflex-basis、justify-content、およびalign-content。

#container {
  background-color: green;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: stretch;
}

.item {
  flex: 1;
  flex-basis: 200px;
  height: 100px;
  min-width: 100px;
  max-width:200px;
  margin: auto;
  border: solid black 2px;
  background-color: red;
}

赤いボックスで領域全体を埋めたい場合は、div.itemから最大幅を取り去ることができます。

13
FiSH GRAPHICS