html - 我如何使用 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

使用 padding 代替 margin。

仅对内部列应用填充:

/* 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>