Wie kann ich zwei HTML-Elemente nehmen jeweils 50% der Breite, und drei nehmen jeweils 33%?

Question

Ich habe drei Tasten, die ich jeweils die gleiche Breite aufnehmen möchte, und kombiniert, um die gesamte Breite ihrer enthaltenen div aufzunehmen. Manchmal ist eine der Schaltflächen ausgeblendet, und ich möchte, dass die anderen beiden Schaltflächen immer noch die gesamte Breite ihres Containers einnehmen und alle die gleiche Breite haben.

I könnte laufen einige Javascript, die ihre Breite hin und her zwischen 50% und 33,3% ändert, wenn die dritte Schaltfläche angezeigt und ausgeblendet wird, aber ich würde es lieber in reinem CSS tun.

Wie kann ich diese Schaltflächen (und ihren Container) so gestalten, dass sie immer 100% der Breite einnehmen und jeweils die gleiche Breite haben, egal wie viele oder wie wenige davon sichtbar sind?

Was ich bisher haben:

<div class="btn-group" style="width: 100%;"> 
    <button class="btn btn-lg btn-default" type="button" onclick="fail();" style="width: 33.3%;">FAIL</button> 
    <button class="btn btn-lg btn-default" type="button" onclick="retry();" style="width: 33.3%;">RETRY</button> 
    <button class="btn btn-lg btn-primary" type="button" onclick="pass();" style="width: 33.3%;">PASS</button> 
</div> 

Answer 1

Set flex auf der übergeordneten und verwenden flex-grow: 1; flex-basis: 0; (oder flex: 1 0 0; kurz) auf die Kinder, so dass sie immer den gesamten Raum des Mutter besetzen.

$('#button').on('click',function() { 
 
    $('#foo').toggleClass('hide'); 
 
})

.flex { 
 
    display: flex; 
 
} 
 
.flex > button { 
 
    flex: 1 0 0; 
 
    background: #eee; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">click</button> 
 

 
<div class="btn-group flex" style="width: 100%;"> 
 
    <button class="btn btn-lg btn-default" type="button" onclick="fail();" style="width: 33.3%;" id="foo">FAIL</button> 
 
    <button class="btn btn-lg btn-default" type="button" onclick="retry();" style="width: 33.3%;">RETRY</button> 
 
    <button class="btn btn-lg btn-primary" type="button" onclick="pass();" style="width: 33.3%;">PASS</button> 
 
</div>

Answer 2

Flexbox für diese Dinge nützlich ist. Fügen Sie einfach einen display:flex zum übergeordneten Container und einen flex-grow:1 zu den Schaltflächen hinzu. gleichmäßig

.btn-group { 
 
    display:flex; 
 
} 
 
button { 
 
    flex-grow:1; 
 
}

<div class="btn-group"> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    <button>3</button> 
 
</div>