`max-block-size` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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

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

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 jedoch Längen basierend auf der Größe Ihres Textinhalts festlegen möchten, müssen Sie dies in Bezug auf die Schreibrichtung tun können.

Jedes Mal, 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 kein vertikaler Wert ist) und max-inline-size, um die maximale "Breite" des Inhalts festzulegen (obwohl diese anstelle dessen vertikal und nicht horizontal sein kann). Siehe Beispiele zu writing-mode, die die verschiedenen Schreibrichtungen in Aktion zeigen.

Probieren Sie es aus

max-block-size: 150px;
writing-mode: horizontal-tb;

max-block-size: 150px;
writing-mode: vertical-rl;

max-block-size: 20px;
writing-mode: horizontal-tb;

max-block-size: 75%;
writing-mode: vertical-lr;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the maximum block size. <br />This will
    limit the size in the block dimension, potentially causing an overflow.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: white;
}

Syntax

css

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--my-anchor 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 die max-block-size als absoluten Wert.
<percentage>: Definiert die max-block-size als Prozentsatz der Größe des enthaltenen Blocks in der Blockachse.
none: Keine Größenbeschränkung der Box.
max-content: Der intrinsisch bevorzugte max-block-size.
min-content: Der intrinsische minimale max-block-size.
fit-content: Verwendet den verfügbaren Raum, jedoch nicht mehr als das 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)).

Wie der `writing-mode` die Richtung beeinflusst

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

Werte von `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 im späteren Verlauf des Entwurfsprozesses aus der CSS Writing Modes Level 3-Spezifikation entfernt. Sie könnten in Level 4 wiederhergestellt werden.

Hinweis: Die Schreibmodi 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

Anfangswert	`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()>                           |
  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

Festlegen von max-block-size mit horizontalem und vertikalem Text

In diesem Beispiel wird derselbe Text (die Eröffnungssätze von Herman Melvilles Roman Moby-Dick) sowohl in den Schreibmodi horizontal-tb als auch vertical-rl präsentiert.

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

HTML

Das HTML richtet die zwei <div>-Blöcke ein, die mit ihren writing-mode-Einstellungen durch die Klassen horizontal oder vertical präsentiert werden. Beide Boxen teilen sich die Klasse standard-box, die die Färbung, Abstände und ihre jeweiligen Werte von 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 gesehen. Sie bietet eine standardmäßige Gestaltung, einschließlich der minimalen und maximalen Blockgrößen, Schriftgröße usw.

Darauf folgen die Klassen horizontal und vertical, die die Eigenschaft writing-mode zur Box hinzufügen, mit dem Wert horizontal-tb oder vertical-rl, je nachdem, welche Klasse verwendet wird.

css

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: black;
  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

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

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

max-block-size CSS property

HTML

CSS

Ergebnis

Help improve MDN

`max-block-size` CSS property