设置flexbox中项目的初始宽度[重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设置flexbox中项目的初始宽度[重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
我有一个flexbox的问题，我试图让我的第一个.cell1采取它内部的3个项目的宽度所以它应该是300px宽所以我已设置为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>答案
使用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>以上是关于设置flexbox中项目的初始宽度[重复]的主要内容，如果未能解决你的问题，请参考以下文章