CSS, HTML und Javascript mit {stil}

CSS min-width / max-width

min-width und max-width machen Blöcke flexibler

CSS min-width und max-width legen die minimale bzw. maximale Breite von HTML-Blöcken fest. min-width / max-width enthält kein padding, border oder margin.

Eine Box wird niemals schmaler als in min-width angegeben, darf aber breiter werden, wenn der Inhalt min-width überschreitet. Eine Box mit max-width wird nicht breiter, selbst wenn CSS width einen größeren Wert enthält.

min-width und max-width regeln z.B. die Laufweite von Texten innerhalb von flexiblen Blöcken oder die Breite des body-Elements in flexiblen Layouts auf eine minimale bzw. maximale Breite.

@media ( min-width: 680px ) {
   .blocks {display: flex; max-width: 700px; background: #efefef}
   .rec1 { width: 60%; max-width: 42em; }
   .rec1 p { max-width: 24em; }
   .rec2 { max-width: 35%; }
   .rec1 .hide { min-width: 640px; }
}

max-width : 42em erlaubt dem ersten Block, bei einem größeren Platzangebot mitzuwachsen.

Eine andere Variante ohne max-width für den linken Block wäre: 

.rec1 p { max-width: 24em; }

max-width : 24em begrenzt die Zeilenlänge und verhindert, dass Text in p-Absätzen breiter als 42em läuft. Bilder und andere Elemente hingegen dürfen den ganzen Raum nutzen.

min-width

Eine Box mit min-width kann durch ein übergroßes Element – z.B. durch ein Bild – verbreitert werden.

Cookie cookie toffee pie tiramisu. Biscuit cookie muffin cupcake. Sweet roll croissant muffin candy canes chupa chups. Icing bonbon macaroon sesame snaps croissant.

Thumbnail klicken, um das Bild in voller Breite zu zeigen Tumbnail klicken
min-width, um den Block über seine Grenzen hinaus auszudehnen

Größeres Bild mit CSS animieren

Ein Element mit min-width kann über die Grenze seines umfassenden Blocks hinaus wachsen, aber die maximale Breite des umfassenden Blocks wird durch das übergroße Element nicht gedehnt.

width mit max-width animieren

CSS transition nutzt min-width / max-width, wenn die Breite eines animierten Elements nicht bekannt ist.

<div class="hide">
   <div class="minmax">
      <img src="flowers.jpg" …>
   </div>
</div>
Breite – width – animieren mit max-width
width mit max-width animieren 
.hide { 
   width:100%; position: relative;
}

.minmax { 
   position: absolute; width: 0; overflow: hidden;
   max-width: 0; transition: max-width 1s;
}

.max { 
   max-width: 900px; width: 100%;
}

Mit max-width: 0; bleibt das Element unsichtbar. Animiert wird nicht width, sondern transition: max-width 1s;.

Die Transition weist dem Bild einen deutlich größeren Wert für max-width zu, als das Element jemals erreichen wird. width: 100% grenzt die Breite des Bildes auf die Breite des umfassenden Blocks ein.

So braucht der Overlay keine Breakpoints für unterschiedliche Monitorgrößen: Das Element passt sich immer an den verfügbaren Platz an.

CSS min-width

Erblich: Nein

min-width
gibt die minimale Breite eines Elements an. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.
Werte
<length> | <percentage> | inherit

min-width überschreibt sowohl width als auch max-width. Wenn max-width kleiner als ein zuvor definierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn der Wert für min-width größer als der aktuelle Wert für width ist, wird width auf den Wert von min-width gesetzt.

<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage (Prozentsatz)
gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

CSS max-width

Erblich: Nein

max-width
gibt die maximale Breite eines Elements an. max-width gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.
Werte
<length> | <percentage> | none | inherit
none
gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.
<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage> (Prozentsatz)
gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

Die Voreinstellung ist 0.

min-width max-width