我希望每个单元格占行的 1/3。我尝试使用 flexbox 实现此目的,但具有 css 属性“flex:1”的框就像它们具有“width:50%”一样。
fiddle 示例:http://jsfiddle.net/skip405/NfeVh/1073/
HTML:
<div class="container">
<div class="row">
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</div>
CSS:
.container {
width: 100%;
background-color: gray;
}
.row {
background: #ccc;
display: flex;
flex: 3;
flex-direction: row;
}
.cell {
width: 50px;
height: 50px;
background-color: white;
border:1px solid black;
display: flex;
flex: 1;
}
最佳答案
使用这个:
.cell {
width: 50px;
height: 50px;
background-color: white;
border:1px solid black;
display: flex;
flex: 0 0 calc(100%/3);
}
使用 flex: 0 0 calc(100%/3)
参见 fiddle :http://jsfiddle.net/NfeVh/1394/
关于html - 如何防止 flexboxes 占用行的剩余宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40504089/