フレックスボックスを使用して、垂直に整列した列とゼブラシェーディングで表形式を実現するにはどうすればよいですか？

Question

私はフレキシボックスを使用して垂直方向に整列した列を実装するには、以下の使用しています：きれい...上記の作品を

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のように表示されます。

フレックスボックスを使用して、垂直に整列した列とゼブラシェーディングで表形式を実現するにはどうすればよいですか？

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>