flex-basis 没有按预期工作

Question

As i understand flex-basis is responsible for deciding the size of an element.

In the example below, I am trying to size all boxes equally to 100px. Just using flex-basis is not achieving the effect.

.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 here: http://plnkr.co/edit/LvrrzHWIw1tPGwK05bCU

Answer 1

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 2

The flex-grow , flex-shrink , flex-basis properties only have an effect on elements in a flex container -- ie elements whose parent has display:flex .

You need to put your each_box divs directly inside of a display:flex element for them to honor their flex-related properties.

Specifically, your markup looks like this (from right clicking one of the yellow divs + hitting "inspect" in 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

You've got container styled as display:flex , but that does no good for your each_box elements, because they're grandchildren, separated from the flex container by the display:block ng-scope.

So you either need to get rid of the ng-scope wrapper, or make it also have display:flex .

Answer 3

Add a width: width:100px; flex-basis gives a default proportion, which will then grow or shrink.

Answer 4

Be sure to also add: flex-wrap: wrap; because the default value nowrap in order to fit everything in one line can affect the size of the elements (eg: width, flex-basis, etc..).

Answer 5

All works for me:

.flex-child { width:0; }

AND

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

AND

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