Wie geben Sie ein flex-Element werden bestimmte minimale Breite?

Ich versuche zu verwenden display: flex, aber einige inline-blocks 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
InformationsquelleAutor Jeroen | 2015-03-16
Schreibe einen Kommentar