Question

我遇到了有关flexbox的问题，我试图让我的第一个.cell1占据其中3个项目的宽度，所以它应该是300px宽，所以我设置了这是flex: 0 0 auto，我已将.cell2设置为flex: 1，因此占用剩余空间但不是这样做，而是似乎重叠.cell1而我不是明白为什么？

如何让.cell1获取其中3个项目的宽度，.cell2获取剩余宽度？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

影响所有主流浏览器的Bug，IE 11＆amp;边缘：

在嵌套的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>

设置flexbox中项目的初始宽度

1 个答案: