flexbox: flex-basis

different between auto and 0.

by yangchenyun

HTML

<body>
  <div class="flex-container">
    <div id="item1" class="flex-item">1</div>
    <div id="item2" class="flex-item">2</div>
    <div id="item3" class="flex-item">3</div>
    <div id="item4" class="flex-item">4</div>
    <div id="item5" class="flex-item">5</div>
    <div id="item6" class="flex-item">6</div>
    <div id="item7" class="flex-item">7</div>
    <div id="item8" class="flex-item">8</div>
    <div id="item9" class="flex-item">9</div>
    <div id="item10" class="flex-item">10</div>
  </div>
</body>

CSS

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  background-color: #f7f7f7;
  padding: 2px;
  width: 800px;
  height: 200px;
  align-items: flex-stretch;
}

.flex-item {
  color: white;
  flex-basis: 90px;
  min-height: 30px;
  /* styles for inner text */
  display: flex;
  justify-content: center;
  align-items: center;
}

#item1 {
  width: 300px;
  flex-basis: auto;
}

#item2 {
  width: 300px;
  flex-basis: 0;  /* same as 0px */
}

#item3 {
  min-width: 0;
  flex-basis: auto;
}

#item5 {
  width: 0;
  flex-basis: auto;
}

#item1 {
  background-color: hsla(246, 32%, 30%, 1);
}

#item2 {
  background-color: hsla(246, 32%, 35%, 1);
}

#item3 {
  background-color: hsla(246, 32%, 40%, 1);
}

#item4 {
  background-color: hsla(246, 32%, 45%, 1);
}

#item5 {
  background-color: hsla(246, 32%, 50%, 1);
}

#item6 {
  background-color: hsla(246, 32%, 55%, 1);
}

#item7 {
  background-color: hsla(246, 32%, 60%, 1);
}

#item8 {
  background-color: hsla(246, 32%, 65%, 1);
}

#item9 {
  background-color: hsla(246, 32%, 70%, 1);
}

#item10 {
  background-color: hsla(246, 32%, 75%, 1);
}