在flexbox中设置项目的初始宽度[重复]
Posted
技术标签:
【中文标题】在flexbox中设置项目的初始宽度[重复]【英文标题】:setting initial width of items in flexbox [duplicate] 【发布时间】: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>
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于在flexbox中设置项目的初始宽度[重复]的主要内容,如果未能解决你的问题,请参考以下文章