レスポンシブデザインで複数のボタンをインラインで挿入する方法は？

Question

は、私は、ボタン

<button ng-repeat="a in graphdata" class="inline"> 

のいくつかの番号を持ってみましょう私はラインにすべてのこれらのボタンを整列させる必要があり、すべてのボタンが表示されている必要があり、そして新しいボタンが追加取得されたときには、その幅を調整する必要があります。 ボタンを互いに取り付ける必要があります。

Answer 1

あなたはフレックスコンテナを使用して、ボタンをラップする必要がありflexbox

$('.new').click(function() { 
 
    $('.element').append('<button class="inline">Button</button>'); 
 
});

.element { 
 
    display: flex; 
 
} 
 
button { 
 
    flex: 1; 
 
    background: white; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="new">Add new Button</button> 
 
<div class="element"> 
 
    <button class="inline">Button</button> 
 
</div>

Answer 2

を使用することができます。

<style> 
    .wrapper { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 

    flex-wrap: wrap; /* if you want buttons in several lines */ 
    } 

    button { 
    min-width: 50px; 
    } 
</style> 

<div class="wrapper"> 
    <button ng-repeat="a in graphdata" class="inline"></button> 
</div>