在flexbox中设置项目的初始宽度[重复]答案

【问题标题】：setting initial width of items in flexbox [duplicate]在flexbox中设置项目的初始宽度[重复]
【发布时间】：2018-08-10 11:37:49
【问题描述】：

我在使用 flexbox 时遇到问题，我正在尝试让我的第一个 .cell1 承担其中 3 个项目的宽度，因此它应该是 300 像素宽，所以我将其设置为 flex: 0 0 auto 和我已将.cell2 设置为flex: 1，所以它占用了剩余空间，但它似乎与.cell1 重叠，我不知道为什么？

如何让.cell1 占用其中 3 个项目的宽度，并让.cell2 占用剩余宽度？

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

.cell1{
  display:flex;
  flex: 0 0 auto;
  flex-direction: row;
}
.cell2{
  display: flex;
  flex: 1;
  background: #ff0000;
}
.item1{
  flex: 0 0 100px;
  background: #ff0000;
}

.item2{
  flex: 0 0 100px;
  background: #0000ff;
}

.item3{
  flex: 0 0 100px;
  background: #ff00ff;
}

<div class="wrap">
  <div class="cell1">
    <div class="item1">
    item 1
    </div>
    <div class="item2">
    item 2
    </div>
    <div class="item3">
    item 3
    </div>
  </div>

  <div class="cell2">
  cell2
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

使用width 而不是flex-basis。这是一个已知的错误，您可以在此处阅读更多信息：

What are the differences between flex-basis and width? （在@Michael_B 接受的答案末尾）

影响所有主要浏览器的错误，IE 11 和 Edge 除外：

在嵌套的 flex 容器中忽略 flex-basis。 宽度有效。一个问题在调整嵌套 flex 容器中的 flex 项时发现。

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

.cell1{
  display:flex;
  flex-direction: row;
}
.cell2{
  display: flex;
  flex: 1;
  background: #ff0000;
}
.item1{
  width:100px;
  background: #ff0000;
}

.item2{
  width:100px;
  background: #0000ff;
}

.item3{
  width:100px;
  background: #ff00ff;
}

<div class="wrap">
  <div class="cell1">
    <div class="item1">
    item 1
    </div>
    <div class="item2">
    item 2
    </div>
    <div class="item3">
    item 3
    </div>
  </div>

  <div class="cell2">
  cell2
  </div>
</div>

【讨论】：