我怎样才能防止flexboxes行的剩余宽度？

我希望每个单元格都是行的1/3。我尝试用flexbox实现这一点，但与CSS属性“flex：1”的框，就像他们有“宽度：50％”。我怎样才能防止flexboxes行的剩余宽度？

小提琴例如：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; 
}

来源

2016-11-09 Jim Peeters

他们占用了剩余的空间。如果你添加3个孩子到柔性容器，并给他们所有flex-grow1属性，他们将占用容器的三分之一 –

有没有办法让2个单元格占用2/3的行并离开1/3排空了？ –

使用此：

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

看小提琴：http://jsfiddle.net/NfeVh/1394/

来源

2016-11-09 10:02:48

你能解释一下“flex：0 0 calc（100％/ 3）”的含义吗？它的工作很艰难 –

这是'flex-grow'，'flex-shrink'和'flex-basis'的缩写[ –

]另外如果你想对齐右边的项目。然后在''.row'上使用'justify-content：flex-end;'。看到小提琴：http://jsfiddle.net/NfeVh/1396/ –

我怎样才能防止flexboxes行的剩余宽度？

回答

相关问题