zentriert max-width nicht fließend mit display: flex

Question

Zum zentrieren von einzelteilen mit display: block menschen verwenden margins: auto. Wenn ich max-width auf Kind setze, das zentriert werden muss und es genug Platz um es herum gibt, wird so viel zu max-width wie es benötigt (abhängig von seinem Inhalt). Aber wenn ich display Eigenschaft des Elternelements zu flex ändere, nimmt es nicht den ganzen freien Platz mehr. Ich muss wirklich max-width verwenden, da ich Element auf kleinen Bildschirmen verkleinern möchte.

Hier ist die jsfiddle. Ein Klick auf die Schaltfläche tauscht display: flex zu display: block auf Eltern. Ich möchte die Grünfläche auf flex zu Flüssigkeit so viel wie es für max-width möglich ist, wie es mit display:block

EDIT getan: Ich möchte auch flex-direction: column

$('input').click(function() { 
 
    var curDisplay = $('#parent').css('display'); 
 
    if (curDisplay == 'block') { 
 
    $('#parent').css('display', 'flex'); 
 
    $('input').val('flex'); 
 
    } else { 
 
    $('#parent').css('display', 'block'); 
 
    $('input').val('block'); 
 
    } 
 
})

#parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 50px; 
 
} 
 
#child { 
 
    max-width: 300px; 
 
    background-color: green; 
 
    height: 50px; 
 
    margin: auto; 
 
} 
 
input { 
 
    width: 100%: 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child"> 
 
    <input type="button" value="Click Me!" /> 
 
    </div> 
 
</div>

Answer 1

verwenden Ich denke du suchst nach Flex-Basis. Mit% können Sie sehr nahe kommen. Sie können px verwenden, um die anfängliche Breite festzulegen, sie bleibt jedoch "reaktionsfähig", bis Sie die Mindestbreite erreichen, wenn Sie sie eingestellt haben.

auf das Kind-Element:

div { 
    flex-basis:40%; 
} 

Hier ist die W3