min-width CSS property

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;
}

Die Breite des Elements wird auf den Wert von min-width gesetzt, wann immer min-width größer ist als max-width oder width.

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 die min-width als absoluten Wert.

<percentage>

Definiert die min-width als Prozentsatz der Breite des umgebenden Blocks.

auto

Der Standardwert. Die Quelle des automatischen Wertes für das angegebene Element hängt von seinem Display-Wert ab. Für Blockboxen, Inline-Boxen, Inline-Blöcke und alle Tabellenlayout-Boxen löst sich auto zu 0 auf.

Für Flex-Elemente und Grid-Elemente ist der minimale Breitenwert entweder die angegebene vorgeschlagene Größe, wie der Wert der width-Eigenschaft, die übertragene Größe, berechnet, wenn das Element ein festgelegtes aspect-ratio hat und die Höhe eine feste Größe ist, andernfalls wird die min-content-Größe verwendet. Wenn das Flex- oder Grid-Element ein Scroll-Container ist oder wenn ein Grid-Element mehr als eine flexible Spaltenstrecke überspannt, beträgt die automatische Mindestgröße 0.

max-content

Die intrinsisch bevorzugte min-width.

min-content

Die intrinsisch minimale min-width.

fit-content

Verwendet den verfügbaren Platz, aber nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Verwendet die fit-content-Formel mit dem verfügbaren Raum, ersetzt durch das angegebene Argument, d.h. min(max-content, max(min-content, argument)).

stretch

Begrenzt die Mindestbreite der Außenabstandsebene eines Elements auf die Breite seines umgebenden Blocks. Es versucht, die Außenabstandsebene in den verfügbaren Raum des umgebenden Blocks zu füllen, so dass es sich in gewisser Weise ähnlich wie 100% verhält, aber die resultierende Größe auf die Außenabstandsebene anwendet, anstatt auf die Box, die durch box-sizing bestimmt wird.

Hinweis: Um die von Browsern verwendeten Aliase für den stretch-Wert und dessen Implementierungsstatus zu überprüfen, siehe den Abschnitt Browser-Kompatibilität.

Formale Definition

Formale Syntax

min-width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Beispiele

Mindestbreite eines Elements festlegen

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• max-width
• width
• min-inline-size
• min-block-size
• box-sizing
• Einführung in das CSS-Boxmodell Leitfaden
• CSS-Boxmodell Modul