CSS Flexbox: wie man die Breite des Elements ändert

Question

Ich benutze Flexbox in CSS. Im nächsten Link sehen Sie drei übereinander liegende Quadrate: http://codepen.io/CrazySynthax/pen/PbLjMO Das erste Quadrat ist das kleinste und das letzte Quadrat ist das größte. Meine Frage ist, wie diese Quadrate zu zeichnen, die ihre Höhe identisch sein, aber ihre Breite unterscheiden, so dass sie wie folgt aussehen:

--- 
------ 
--------- 

Dies ist der Code:

<div class="container"> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
</div> 


html, body { 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
    displax: flex; 
} 
.container{ 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-flow:column wrap; 
    justify-content:space-around; 

} 
.square { 
    flex:1 1 auto; 
    background-color:gray; 
    border:solid; 
    margin: 1em; 
} 

.square:nth-child(1) { 
    flex-grow: 1 
} 

.square:nth-child(2) { 
    flex-grow: 2 
} 

.square:nth-child(3) { 
    flex-grow: 5 
} 

Answer 1

Fügen Sie eine Klasse zu jedem div mit gewünschten width & verlassen flex-grow s in 1 zu halten gleichen height:

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin:0; 
 
    padding:0; 
 
    displax: flex; 
 
} 
 
.container{ 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-flow:column wrap; 
 
    justify-content:space-around; 
 
    
 
} 
 
.square { 
 
    flex:1 1 auto; 
 
    background-color:gray; 
 
    border:solid; 
 
    margin: 1em; 
 
    width: 200px 
 
} 
 
.square:nth-child(1) { 
 
    flex-grow: 1; 
 
} 
 
.square:nth-child(2) { 
 
    flex-grow: 1; 
 
} 
 
.square:nth-child(3) { 
 
    flex-grow: 1; 
 
} 
 
/*added classes*/ 
 
.one { 
 
    width: 150px; 
 
} 
 
.two { 
 
    width: 250px; 
 
} 
 
.three { 
 
    width: 350px; 
 
} 
 

 
@media (max-width: 350px) { 
 
    .one { 
 
     width: auto; 
 
    } 
 
    .two { 
 
     width: auto; 
 
    } 
 
    .three { 
 
     width: auto; 
 
    } 
 
}

<div class="container"> 
 
    <div class="square one"></div> 
 
    <div class="square two"></div> 
 
    <div class="square three"></div> 
 
</div>

EDIT: Für ansprechbar über 350px oder was auch immer eine @media Abfrage hinzufügen (stellen Sie sicher, dass es am Ende des CSS-Blattes oder später als die benutzerdefinierten width.one.two & .three-Set):

Test-Größenänderung Fenster auf external JSFiddle

@media (max-width: 350px) { 
    .one { 
     width: auto; 
    } 
    .two { 
     width: auto; 
    } 
    .three { 
     width: auto; 
    } 
}