flex-basis未按预期工作

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

我发现我不得不在Chrome中使用min-width和flex-basis。我不确定我是否有其他问题导致了这一点。

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

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

Answer 2

flex-grow、flex-shrink、flex-basis属性只对flex容器中的元素有效--即其父元素具有display:flex的元素。

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

具体来说，您的标记如下所示(在Firefox中右击其中一个黄色div+点击"inspect“)：

<div class="container">
  <!-- ngRepeat: stock in stockList -->
  <div class="ng-scope" ng-repeat="stock in stockList">
    <div class="each_box ng-binding">
    0-FB/100

您已经将container样式化为display:flex，但这对您的each_box元素没有好处，因为它们是孙子元素，由display:block ng-scope与flex容器分开。

所以你要么需要去掉ng-scope包装器，要么让它也有display:flex。

Answer 3

还要确保添加：flex-wrap: wrap;，因为为了在一行中容纳所有内容而设置的默认值nowrap会影响元素的大小(例如: width、flex-Base.等)。