Question

我希望每个单元格都是行的1/3。我尝试用flexbox实现这个，但是带有css属性的框＆＃34; flex：1＆＃34;表现得像他们的宽度：50％＆＃34;。

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

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

请参阅小提琴：http://jsfiddle.net/NfeVh/1394/

如何防止flexboxs占用行的剩余宽度？

1 个答案: