Flexbox Sizing Ausgabe

ich eine Flex-Box mit 2 Elementen darin nebeneinander haben normalerweise Elemente in Flexbox automatisch alle Platz nehmen ...Flexbox Sizing Ausgabe

aber nicht hier ... Ich habe versucht, die Höhe manuell eingestellt Höhe: 100% ... nichts woks

wo ist mein Fehler? (das Menüelement soll die gesamte verfügbare Höhe einnehmen, für das Beispiel habe ich künstlich eine feste Höhe für das blaue Element gemacht ... aber in meinem Code soll es abhängig vom Inhalt variabel sein, also das Einstellungsmenü in Pixeln ist keine Option)

html:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="./test2.css"> 
</head> 
<body> 

     <div class="framehome"> 
      <div class="myaccountwrapper"> 
       <div class="myaccountleft"> 
        Menu 
       </div> 
       <div class="myaccountright"> 
        <div id="windowmyaccount" class="submenu" id="boxaccount"> 
         Change my Handle 
        </div> 
        <div id="windowhandle" class="submenu" id="boxaccount"> 
         Change my Handle 
        </div> 
       </div> 
      </div> 
     </div> 
</body>

CSS:

.myaccountwrapper{ 
    display:flex; 
    flex-direction:row; 
    align-items:center; 
    color:lightgrey; 
    background-color:green; 
} 

.myaccountleft{ 
    display: flex; 
    flex-direction: column; 
    width:250px; 
    height:100%; 
    background-color:red; 
} 

.myaccountright{ 
    flex-grow: 1; 
    background-color:blue; 
    height:300px; 
}

Quelle

2017-11-27 agone07

Sie setzen die align-items Eigenschaft des übergeordneten Elements .myaccountwrapper auf den Wert center, die das Standardverhalten der Flex-Elemente verhindert, die die height des übergeordneten Elements zu füllen ist.

Standardmäßig ist der Wert der Eigenschaft align-items auf stretch festgelegt, wodurch sich die Flexelemente entlang der vertikalen/Querachse ausdehnen.

So Ihr Problem zu lösen nur die align-items Eigenschaft entfernen oder kommentieren Sie auf dem Elternteil.

Ich nehme an, dass Sie die gesamte Höhe des Ansichtsfensters füllen möchten, also habe ich die height des übergeordneten Elements auf 100vh festgelegt.

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.myaccountwrapper { 
 
    display: flex; 
 
    /*align-items: center; the culprit */ 
 
    color: lightgray; 
 
    background-color: green; 
 
    height: 100vh; /* needs to be set if you want that flex-items fill the viewport height */ 
 
} 
 

 
.myaccountleft { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 250px; 
 
    background-color: red; 
 
} 
 

 
.myaccountright { 
 
    flex: 1; 
 
    background-color: blue; 
 
}

<div class="framehome"> 
 
    <div class="myaccountwrapper"> 
 
    <div class="myaccountleft"> 
 
     Menu 
 
    </div> 
 
    <div class="myaccountright"> 
 
     <div id="windowmyaccount" class="submenu" id="boxaccount"> 
 
     Change my Handle 
 
     </div> 
 
     <div id="windowhandle" class="submenu" id="boxaccount"> 
 
     Change my Handle 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Und für den Vergleich mit dem align-items: center:

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.myaccountwrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    color: lightgray; 
 
    background-color: green; 
 
    height: 100vh; 
 
} 
 

 
.myaccountleft { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 250px; 
 
    background-color: red; 
 
} 
 

 
.myaccountright { 
 
    flex: 1; 
 
    background-color: blue; 
 
}

<div class="framehome"> 
 
    <div class="myaccountwrapper"> 
 
    <div class="myaccountleft"> 
 
     Menu 
 
    </div> 
 
    <div class="myaccountright"> 
 
     <div id="windowmyaccount" class="submenu" id="boxaccount"> 
 
     Change my Handle 
 
     </div> 
 
     <div id="windowhandle" class="submenu" id="boxaccount"> 
 
     Change my Handle 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-11-27 19:59:19 VXp

Flexbox Sizing Ausgabe

Antwort

Verwandte Themen