min-width CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft min-width legt die Mindestbreite eines Elements fest. Sie verhindert, dass der verwendete Wert der Eigenschaft width kleiner als der für min-width angegebene Wert wird.
Die Breite des Elements wird auf den Wert von min-width gesetzt, wenn min-width größer als max-width oder width ist.
Probieren Sie es aus
min-width: 150px;
min-width: 20em;
min-width: 75%;
min-width: 40ch;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Change the minimum width.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: white;
}
Syntax
/* <length> value */
min-width: 3.5em;
min-width: anchor-size(width);
min-width: anchor-size(--my-anchor self-inline, 200%);
/* <percentage> value */
min-width: 10%;
/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fit-content(20em);
min-width: stretch;
/* Global values */
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: revert-layer;
min-width: unset;
Werte
<length>-
Definiert
min-widthals absoluten Wert. <percentage>-
Definiert
min-widthals Prozentsatz der Breite des enthaltenden Blocks. auto-
Der Standardwert. Die Quelle des automatischen Werts für das angegebene Element hängt von dessen display-Wert ab. Für Blockboxen, Inline-Boxen, Inline-Blöcke und alle Tabellenlayout-Boxen wird
autozu0aufgelöst.Für Flex-Elemente und Grid-Elemente ist der Mindestbreitenwert entweder die angegebene vorgeschlagene Größe, beispielsweise der Wert der Eigenschaft
width, die übertragene Größe, die berechnet wird, wenn für das Element einaspect-ratiofestgelegt ist und die Höhe eine bestimmte Größe hat; andernfalls wird die Größemin-contentverwendet. Wenn das Flex- oder Grid-Element ein Scroll-Container ist oder wenn ein Grid-Element mehr als einen flexiblen Spalten-Track überspannt, beträgt die automatische Mindestgröße0. max-content-
Die intrinsisch bevorzugte
min-width. min-content-
Die intrinsische minimale
min-width. fit-content-
Verwendet den verfügbaren Platz, jedoch nicht mehr als
max-content, d.h.min(max-content, max(min-content, stretch)). fit-content(<length-percentage>)-
Verwendet die Formel
fit-content, wobei der verfügbare Platz durch das angegebene Argument ersetzt wird, d.h.min(max-content, max(min-content, argument)). stretch-
Beschränkt die Mindestbreite der Margin-Box des Elements auf die Breite seines enthaltenden Blocks. Es wird versucht, die Margin-Box den verfügbaren Platz im enthaltenden Block ausfüllen zu lassen, wodurch sich das Verhalten in gewisser Weise ähnlich wie bei
100%verhält, die resultierende Größe jedoch auf die Margin-Box statt auf die durch box-sizing bestimmte Box angewendet wird.Hinweis: Informationen zu den von Browsern für den Wert
stretchverwendeten Aliasnamen und zu dessen Implementierungsstatus finden Sie im Abschnitt Browser-Kompatibilität.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
| Animationstyp | Längenangabe, Prozentsatz oder calc(); |
Formale Syntax
min-width =
auto |
<box-size> |
<anchor-size()> |
contain |
fit-content( <length-percentage [0,∞]> )
<box-size> =
<length-percentage> |
stretch |
contain |
min-content |
max-content |
fit-content |
fit-content( ) |
calc-size( )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<length-percentage> =
<length> |
<percentage>
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
Mindestbreite von Elementen festlegen
table {
min-width: 75%;
}
form {
min-width: 0;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 3 # sizing-values |