max-block-size

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Die CSS-Eigenschaft max-block-size legt die maximale Größe eines Elements in der dem Schreibmodus entgegengesetzten Richtung fest, wie durch writing-mode angegeben. Das heißt, wenn die Schreibrichtung horizontal ist, entspricht max-block-size max-height; wenn die Schreibrichtung vertikal ist, ist max-block-size dasselbe wie max-width.

Die maximale Länge der anderen Dimension wird mit der max-inline-size Eigenschaft spezifiziert.

Dies ist nützlich, weil max-width immer für horizontale Größen und max-height immer für vertikale Größen verwendet wird. Wenn Sie Längen basierend auf der Größe Ihres Textinhalts festlegen müssen, sollten Sie dies im Hinblick auf die Schreibrichtung tun können.

Immer wenn Sie normalerweise max-height oder max-width verwenden würden, sollten Sie stattdessen max-block-size verwenden, um die maximale „Höhe“ des Inhalts festzulegen (auch wenn dies keine vertikale Größe ist) und max-inline-size, um die maximale „Breite“ des Inhalts festzulegen (auch wenn dies stattdessen vertikal statt horizontal sein könnte). Siehe writing-mode Beispiele, die die verschiedenen Schreibmodi in Aktion zeigen.

Probieren Sie es aus

Syntax

css

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--myAnchor self-inline, 250px);
max-block-size: calc(anchor-size(width) / 2);

/* <percentage> values */
max-block-size: 75%;

/* Keyword values */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fit-content(20em);

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

Werte

Der Wert der max-block-size-Eigenschaft kann jeder Wert sein, der für die Eigenschaften max-width und max-height zulässig ist:

<length>: Definiert max-block-size als absoluten Wert.
<percentage>: Definiert max-block-size als Prozentsatz der Größe des umgebenden Blocks in der Blockachse.
none: Keine Begrenzung der Boxgröße.
max-content: Die intrinsische bevorzugte max-block-size.
min-content: Die intrinsische minimale max-block-size.
fit-content: Nutzt den verfügbaren Raum, jedoch nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>): Verwendet die fit-content-Formel, wobei der verfügbare Raum durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).

Wie `writing-mode` die Richtung beeinflusst

Die Werte des writing-mode beeinflussen die Zuordnung von max-block-size zu max-width oder max-height wie folgt:

Werte des `writing-mode`	`max-block-size` entspricht
`horizontal-tb`, `lr`, `lr-tb`, `rl`, `rb`, `rb-rl`	`max-height`
`vertical-rl`, `vertical-lr`, `sideways-rl`, `sideways-lr`, `tb`, `tb-rl`	`max-width`

Hinweis: Die writing-mode Werte sideways-lr und sideways-rl wurden spät im Designprozess aus der CSS Writing Modes Level 3 Spezifikation entfernt. Sie könnten in Level 4 wieder eingeführt werden.

Hinweis: Die Schreibrichtungen lr, lr-tb, rl, rb und rb-tl sind in HTML Kontexten nicht mehr zulässig; sie dürfen nur in SVG 1.x Kontexten verwendet werden.

Formale Definition

Initialer Wert	`none`
Anwendbar auf	wie bei `width` und `height`
Vererbt	Nein
Prozentwerte	Blockgröße des beinhaltenden Blocks
Berechneter Wert	wie bei `max-width` und `max-height`
Animationstyp	Längenangabe, Prozentsatz oder `calc()`;

Formale Syntax

max-block-size = 
  <'max-width'>  

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

<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> = 
  <intrinsic-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

Festlegen der `max-block-size` mit horizontalem und vertikalem Text

In diesem Beispiel wird derselbe Text (die Eröffnungssätze aus dem Roman Moby-Dick von Herman Melville) sowohl in den Schreibrichtungen horizontal-tb als auch vertical-rl dargestellt.

Alles andere an den beiden Boxen ist identisch, einschließlich der für max-block-size verwendeten Werte.

HTML

Das HTML stellt die beiden <div> Blöcke bereit, die mit ihrem writing-mode anhand der CSS-Klassen horizontal oder vertical dargestellt werden. Beide Boxen teilen die Klasse standard-box, die Färbung, Abstände und ihre jeweiligen Werte für max-block-size festlegt.

html

<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

CSS

Das CSS definiert drei Klassen. Die erste, standard-box, wird auf beide Boxen angewendet, wie oben zu sehen. Sie liefert eine Standardformatierung einschließlich der minimalen und maximalen Blockgrößen, Schriftgröße usw.

Danach folgen die Klassen horizontal und vertical, die die Eigenschaft writing-mode zur Box hinzufügen, wobei der Wert auf horizontal-tb oder vertical-rl gesetzt wird, je nachdem, welche Klasse verwendet wird.

css

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Ergebnis

Spezifikationen

Specification
CSS Logical Properties and Values Level 1 # propdef-max-block-size
CSS Box Sizing Module Level 4 # sizing-values

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Die zugeordneten physischen Eigenschaften: max-width und max-height
Festlegen der maximalen Größe in der anderen Richtung: max-inline-size
writing-mode