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

Answer 1

请务必添加：因为为了将所有内容都放在一行中，flex-wrap: wrap; 默认值会影响元素的大小（例如：宽度、flex-basis 等）。nowrap

Answer 2

flex-grow,,属性仅对flex-shrinkFlex容器中的元素（即其父元素有影响）flex-basis有影响。display:flex

您需要将each_boxdiv 直接放在元素内部，display:flex以便它们遵循与 Flex 相关的属性。

具体来说，您的标记如下所示（右键单击黄色 div 之一 + 在 Firefox 中点击“检查”）：

<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:blockng-scope 与 flex 容器分开。

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

Answer 3

I found I had to use min-width as well as flex-basis in Chrome. I'm not sure if I had another problem that caused this.

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

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

Answer 4

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