Wie kann man die Größe der Flexbox gleich machen?

here is JSfaddle Wie kann man die Größe der Flexbox gleich machen?

Ich bin Anfänger in CSS. Ich bin versucht, CSS-Flexbox-Element gleiche Größe zu verwenden, aber es hat nicht funktioniert. Ich habe die gleiche Frage auf stackoverflow diese Antwort nicht mein Problem zu lösen gefunden.

.container { 
 
    display: flex; 
 
} 
 

 
.flx { 
 
    text-align: center; 
 
    color: #fff; 
 
    flex: 1; 
 
} 
 

 
.flx:nth-child(1) { 
 
    background-color: green; 
 
} 
 

 
.flx:nth-child(2) { 
 
    background-color: red; 
 
} 
 

 
.flx:nth-child(3) { 
 
    background-color: blue; 
 
} 
 

 
.flx:nth-child(4) { 
 
    background-color: aqua; 
 
}

<div class="container"> 
 
    <div class="flx"> 
 
    alsldkj;lasdfj;l;asf 
 
    </div> 
 
    <div class="flx"> 
 
    asd 
 
    </div> 
 
    <div class="flx"> 
 
    asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf 
 
    <br /> asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs 
 
    <br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf 
 
    <br /> 
 
    </div> 
 
    <div class="flx"> 
 
    asfdasdfasdfasasf 
 
    </div> 
 
</div>

Quelle

2017-07-19 Inderjeet

, wenn Sie 'Überlauf hinzuzufügen: auto;' oder lustige lange Wörter zu vermeiden, wäre es https://codepen.io/anon/pen/JJQKVb oder brechen Wort/verbergen Überlauf https: // copepen.io/anon/pen/pwXbBX –

Sie fügen overflow-x:auto nur zu Ihrer Klasse flx .. Unten ist die Arbeits Schnipsel ..

.container { 
 
\t display: flex; 
 
} 
 
.flx { 
 
\t 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t flex: 1; 
 
\t overflow: auto; 
 
} 
 

 
.flx:nth-child(1) { 
 
\t background-color: green; 
 
} 
 

 
.flx:nth-child(2) { 
 
\t background-color: red; 
 
} 
 

 
.flx:nth-child(3) { 
 
\t background-color: blue; 
 
} 
 

 
.flx:nth-child(4) { 
 
\t background-color: aqua; 
 
}

<div class="container"> 
 

 
\t <div class="flx"> 
 
\t \t alsldkj;lasdfj;l;asf 
 
\t </div> 
 
\t <div class="flx"> 
 
\t asd 
 
\t </div> 
 
\t <div class="flx"> 
 
\t asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf 
 
\t <br /> 
 
\t asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs<br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf 
 
\t <br /> 
 
\t </div> 
 
\t <div class="flx"> 
 
\t asfdasdfasdfasasf 
 
\t </div> 
 
\t 
 
\t 
 
</div>

Quelle

2017-07-19 05:55:06

<!-- hi Check this.. i am not sure this answer may help you.. add max-width of div -->

.container { 
 
     display: flex; 
 
    } 
 

 
    .flx { 
 
     text-align: center; 
 
     color: #fff; 
 
     flex: 1; 
 
    max-width:100px; 
 
    width:100%; 
 
    } 
 

 
    .flx:nth-child(1) { 
 
     background-color: green; 
 
    } 
 

 
    .flx:nth-child(2) { 
 
     background-color: red; 
 
    } 
 

 
    .flx:nth-child(3) { 
 
     background-color: blue; 
 
    } 
 

 
    .flx:nth-child(4) { 
 
     background-color: aqua; 
 
    } 
 

 
.flx:nth-child(5) { 
 
    background-color: orange; 
 
} 
 
.flx:nth-child(6) { 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
     <div class="flx"> 
 
     alsldkj;lasdfj;l;asf 
 
     </div> 
 
     <div class="flx"> 
 
     asd 
 
     </div> 
 
     <div class="flx"> 
 
     asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf 
 
     <br /> asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs 
 
     <br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf 
 
     <br /> 
 
     </div> 
 
     <div class="flx"> 
 
     asfdasdfasdfasasf 
 
     </div> 
 
<div class="flx"> 
 
    asfdasdfasdfasasf 
 
    </div> 
 
    <div class="flx"> 
 
    asfdasdfasdfasasf 
 
    </div> 
 
    </div>

Quelle

2017-07-19 05:57:23

Wie kann man die Größe der Flexbox gleich machen?

Antwort

Verwandte Themen