Wie geben Sie ein flex-Element werden bestimmte minimale Breite?
Ich versuche zu verwenden display: flex
, aber einige inline-block
s sollte nie verkleinert werden. Ich bin mir nicht sicher, wie Sie Sie zu erreichen, dass.
Hier ist eine repro der meine situation:
CSS:
.marker {
width: 2em;
height: 2em;
background-color: #cef;
border: 1px solid gray;
margin-right: 5px;
}
label {
display: flex;
align-items: flex-start;
}
HTML:
<div class="container" style="width: 200px; border: 1px solid #ccc; padding: 10px;">
<p>The blue boxes should be 2em wide!</p>
<label>
<span class="marker"></span>
<span class="text">Some rather long text which is the whole reason for using flexbox.</span>
</label>
<label>
<span class="marker"></span>
<span class="text">Short text.</span>
</label>
</div>
Das problem ist, dass .marker
ist nicht angegeben width: 2em
tun, sondern ist eher schmal.
Ich gelesen habe, durch css-tricks " hilfreich Guide to Flexbox. Die einzige Eigenschaft, die schien nützlich war flex-shrink
(ich hatte erwartet, so etwas wie ein "nie schrumpfen" - Eigenschaft), aber keine Möglichkeit gefunden, es zu benutzen für meine Zwecke. Ich habe Magermilch die MDN-flex-Seiten, konnte aber keine Lösung finden, es entweder. Schließlich habe ich auch sorgfältig überprüft die "doppelte" Vorschläge Stack Overflow hat mir, als ich schrieb, diese Frage, aber keine Lösung gibt.
Wie können Sie ein flex-Element nie schrumpfen, über eine bestimmte Mindestbreite?
- Ich weiß nicht, ist das der richtige Weg ist oder nicht...oder es ist auf Sie anwendbar ist oder nicht..aber nur ein Vorschlag, wenn wir die .marker-Breite-min-width funktioniert es und auch wenn wir die position absolute, dann funktioniert es auch...wenn ich die Beratung falsch, ich appologise
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie
flex-basis
und dieflex-shrink
Eigenschaften.Ändern Sie Ihre
.marker
wie folgt:CSS:
HTML:
Alternativ können Sie weiterhin verwenden
width: 2em
und verwenden Sie nur das flex-Kürzel:Die Probleme, die Sie erleben, sind die durch die default-Werte des
flex
Eigenschaft. Jedem untergeordneten Element eines flex-Containers zu einem flex-Element mit:flex-grow:1; flex-shrink: 1; flex-basis: 0%;
(Siehe hier für mehr info).Dieser Eigenschaften ermöglicht der flex-Punkt zu schrumpfen, was nicht erwünscht ist in Ihrer Umsetzung.
label
mit einem sehr kurzen text, der in der.marker
gehen wird außerhalb2em
. Jeder Kommentar auf, dass? (Oder soll ich verhindern, dass dies zu einem "Chamäleon-Frage" und der post eine neue?).marker
. Vielleicht können Sie zeigen Ihre problem und vielleicht zeigen, was Sie erreichen wollenflex: 0 0 auto;
war genau das, was ich brauchte. Im Nachhinein habe ich das Gefühl, ich sollte in der Lage gewesen zu folgern, dass aus Ihrer Antwort. Dank einem Haufen. (PS. Ein kleines detail, aber mit dem letzten edit zu meiner Frage, ich würde vorschlagen, ändern Sie Ihre Stack-Snippet zu0 0 auto
zu.)