flexbox 列的问题

【问题标题】：issue with flexbox columnsflexbox 列的问题
【发布时间】：2016-10-15 11:39:12
【问题描述】：

我有一个列相等的 flex 网格，但在其中一些我有一些填充。看来这会破坏列宽。

我尝试将填充添加到内部包装器中，但这对我来说不起作用，因为它基于百分比。

.grid{
  width: 100%;
  display: flex;
  flex-direction: row;
}

.column {
  flex: 1 1 100%;
  display: block;
  height: 200px;
  background-color: #e5e5e5;
  border: 1px solid #999999;
  &.padd{
    padding: 0 5%;
  }
}

https://jsfiddle.net/heyapo/8qntbj3c/

有什么想法吗？

【问题讨论】：

标签： css flexbox

【解决方案1】：

很简单，flex-grow 或 flex-basis 不等于 width。

详解here: by Michael_B.

填充将添加到接收它的元素的尺寸，其他元素将相应地解析它们的尺寸。

如果你想使用宽度...使用宽度（和盒子大小）。

.grid {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.column {
  width: calc(100% / 3);
  display: block;
  height: 200px;
  background-color: #e5e5e5;
  border: 1px solid #999999;
}
padd {
  padding: 0 20px;
}

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column padd"></div>
</div>

【讨论】：

根据限制，另一种解决方案是使用box-sizing: border-box。这样就可以在容器的宽度中包含填充。