首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS flexbox动态调整大小:首选最大宽度

CSS flexbox动态调整大小:首选最大宽度
EN

Stack Overflow用户
提问于 2014-08-26 21:57:26
回答 1查看 34.2K关注 0票数 24

我有一个包装的行Flexbox容器。

在其中的项目上,我设置了:

  • flex: 1;使项目增长以水平填充container
  • min-width: X; max-width: Y;',以便项目保持在可接受的大小内。

.

问题(如示例中可见)是resize-wrap的行为。

发生了什么:

每一项都尽可能小,因此它们的最大数量被放在第一行,然后它们就会增长到需要填充一行的程度。因此,项的max-width几乎永远不会到达,并且项更接近于min-width

我要找的东西:

每一项都尽可能大,因此它们的最小数量被放在第一行,然后它们会缩小到需要添加新项并填充该行的程度。因此,项的min-width几乎永远不会到达,并且项更接近于max-width

换言之,

我想要每行项目的最小可能数量,而不是最大数量。

有没有办法在没有JS的CSS中做到这一点?

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2014-10-25 03:30:33

我想您要找的是flex-basisjustify-contentalign-content

代码语言:javascript
复制
#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的最大宽度。

票数 15
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25507658

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档