端までのボタン、余白を削除

Question

私は質問があります：どのようにボタンの間に余白を維持しながら青い枠線の端までボタンを行うことができますか？右と下から余白を削除する方法。 私はflexboxを使用していますが、うまく動作しますが、このマージンを削除する方法はわかりません。フレキシボックス機能に建て決して間のギャップを持つことがないのでフレキシボックスを使用すると、かなりの難題であることをAchieveing私は緑でマークマージンを削除したい 、

.container { 
 
    width: 80%; 
 
    border: 1px solid blue; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
button { 
 
    margin-right: 2em; 
 
    margin-bottom: 2em; 
 
}

<div class="container"> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
</div>

Answer 1

列。

Better way to set distance between flexbox items

あなたがgridを使用する場合は、あなたはそれを容易に実現することができます。

.container { 
 
    width: 80%; 
 
    border: 1px solid blue; 
 
    display: grid; 
 
    grid-template-columns: repeat(7, 1fr); 
 
    grid-gap: 2em; 
 
}

<div class="container"> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
    <button>Text</button> 
 
</div>