Question

据我所知，flex-basis负责决定元素的大小。

在下面的示例中，我尝试将所有框均等地调整为100px。仅仅使用flex-basis并没有达到效果。

.each_box {
  -webkit-flex-grow: 0;
  -webkit-flex-shrink: 0;
  -webkit-flex-basis: 100px;

  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;

  background-color: yellow;
  height: 50px;

  border: 1px solid black;

}

Plnkr：http://plnkr.co/edit/LvrrzHWIw1tPGwK05bCU

Answer 1

flex-grow，flex-shrink，flex-basis属性仅对Flex容器中的元素产生影响 - 即父元素为{{1}的元素}。

您需要将display:flex div直接放在each_box元素中，以便他们遵守与flex相关的属性。

具体来说，你的标记看起来像这样（从右键单击其中一个黄色div +点击＆＃34;检查＆＃34;在Firefox中）：

display:flex

您已将<div class="container">  <div class="ng-scope" ng-repeat="stock in stockList"> <div class="each_box ng-binding"> 0-FB/100设为container，但这对您的display:flex元素没有任何好处，因为他们是孙子孙女，与灵活容器分开each_box ng-scope。

所以你要么需要摆脱display:block包装，要么让它ng-scope。

Answer 2

我发现我必须在Chrome中使用最小宽度和flex-basis。我不确定是否有导致此的另一个问题。

.flex-container {
  display: flex;
  width: 100%;
}

.flex-child {
  flex-basis: 50%;
  min-width: 50%;
}

Answer 3

添加宽度：width:100px; flex-basis给出一个默认比例，然后增长或缩小。

Answer 4

请确保还添加：flex-wrap: wrap;，因为默认值nowrap为了使所有内容都适合一行，会影响元素的大小（例如：宽度，伸缩基础等）。）。

Answer 5

所有对我有用的东西

.flex-child { width:0; }

AND

.flex-child { min-width:0; }

AND

.flex-child { flex-shrink:0; } /* no scrollbars inside */

flex-basis不按预期工作

5 个答案: