<div class='container'>
<div class='column'><img></div>
<div class='column'>text</div>
<div class='column'>some more text</div>
</div>
.container {display: flex}
.container .column {flex-grow: 1}
Mir ist aufgefallen, dass alle Spalten gleich breit sind
aber
Wenn eine der Spalten beispielsweise eine Bildbreite hat, die breiter als die Spalte ist, werden die Spalten breiter.
Gibt es eine Möglichkeit, eine Spalte daran zu hindern, breiter zu werden, ohne eine Breite zu erzwingen (über CSS oder JS)?
Es ist nicht genau klar, worum es geht, aber eine maximale Breite des Bildes und flex:1der Spalten scheint zu funktionieren.
Standardmäßig werden Flex-Elemente nicht unter ihre Mindestinhaltsgröße (die Länge des längsten Wortes oder Elements mit fester Größe) verkleinert. Um dies zu ändern, legen Sie die Eigenschaft min-width oder min-height fest. (Siehe §4.5 Implizite Mindestgröße von Flex-Elementen.)
Autoren werden aufgefordert, die Flexibilität mithilfe der Flex-Kurzform und nicht direkt mit Flex-Grow zu steuern, da die Kurzschrift alle nicht spezifizierten Komponenten korrekt zurücksetzt, um den allgemeinen Verwendungszwecken gerecht zu werden.
.container {
display: flex;
width: 240px;
}
.container .column {
flex: 1;
min-width:0; /* Firefox fix */
border: 1px solid red;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}<div class='container'>
<div class='column'>
<img src="http://lorempixel.com/output/city-q-c-200-200-2.jpg" alt="" />
</div>
<div class='column'>text</div>
<div class='column'>some more text</div>
</div>EDIT - JSFiddle für re FF Fix
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen