フレックスボックス列の問題

Question

私は等しい列のフレックスグリッドを持っていますが、その中にはいくつかのパディングがあります。これは列の幅を分割するように見えます。

パッディングを内側のラッパーに追加しようとしましたが、これはパーセンテージベースでは機能しません。

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

任意のアイデア？

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