フレックスを適用した内側要素のパディングサイズを変更

Question

div要素のパディングを設定する必要がありますが、そのサイズをコンテナの10％にしたいとします。

私の例からわかるように、menuはラッパーを経由します。

menuを100％（私はcalcを使用することができます）に保ち、最初の場所で問題を解決する方法を知りたいと思います。ありがとう。

#wrapper { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: red; 
 
} 
 

 
#menu { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    padding-left:75px; // problem here 
 
} 
 
.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: gray; 
 
}

<div id="wrapper"> 
 
    <div id="menu"> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはbox-sizingプロパティを追加することができます。

デフォルトはcontent-boxで、要素のwidthとheightのみが含まれています。 border-boxはまた、paddingおよびborderの特性を含む。

More information from MDN

私はスニペットhereでそれを含めました方法について説明。

html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 

 
#wrapper { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: red; 
 
} 
 

 
#menu { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    padding-left:75px; // problem here 
 
} 
 
.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: gray; 
 
}

<div id="wrapper"> 
 
    <div id="menu"> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    </div> 
 
</div>