如何使用flexbox实现垂直对齐列和斑马阴影的表格外观？

Question

我正在使用以下方法使用flexbox实现垂直对齐的列：

jsFiddle

.container {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-direction: column;
  margin: 0.3em;
}
.column > div:first-child {
  font-weight: bold;
}

<div class='container'>
  <div class='column'>
    <div>food</div>
    <div>beans</div>
    <div>macademia nuts salted and coated with caramel</div>        
  </div>
  <div class='column'>
    <div>comments</div>
    <div>beans</div>
    <div>excellent nutrition</div>                
  </div>
  <div class='column'>
    <div>price</div>
    <div>3$</div>
    <div>20$</div>                
  </div>            
</div>

......上面的效果非常好但是当我尝试添加斑马阴影时，颜色之间的边距变为可见，如in this jsfiddle所示。

如何使用flexbox实现垂直对齐列和斑马阴影的表格外观？

Answer 1

而不是margin使用padding。

仅将填充应用于内部列：

/* KEY RULE */
.column + .column > div {
  padding-left: 2em;
}

/* ORIGINAL CODE */
.container {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-direction: column;
}
.column > div:first-child {
  font-weight: bold;
}
.column > div:nth-child(odd) {
  background: #dddddd;
}

<div class='container'>
  <div class='column'>
    <div>food</div>
    <div>beans</div>
    <div>macademia nuts salted and coated with caramel</div>
  </div>
  <div class='column'>
    <div>comments</div>
    <div>beans</div>
    <div>excellent nutrition</div>
  </div>
  <div class='column'>
    <div>price</div>
    <div>3$</div>
    <div>20$</div>
  </div>
</div>