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 ⁨Januar 2020⁩.

* Some parts of this feature may have varying levels of support.

Die max-block-size CSS Eigenschaft spezifiziert die maximale Größe eines Elements in der Richtung, die der Schreibrichtung entgegengesetzt ist, wie sie durch writing-mode festgelegt ist. 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 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 Längen basierend auf der Größe Ihres Textinhalts festlegen müssen, sollten Sie dies unter Berücksichtigung der 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 kein vertikaler Wert ist) und max-inline-size, um die maximale "Breite" des Inhalts festzulegen (obwohl dies stattdessen vertikal sein könnte). Siehe writing-mode Beispiele, 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 Umgebungsblocks in der Blockachse.
none: Keine Begrenzung für die Größe der Box.
max-content: Die intrinsische bevorzugte max-block-size.
min-content: Die intrinsische minimale max-block-size.
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 fit-content Formel mit dem zur Verfügung stehenden Raum, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).

Wie `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 spät im Designprozess aus der CSS Writing Modes Level 3 Spezifikation entfernt. Sie könnten in Level 4 wiederhergestellt werden.

Hinweis: Die Schreibrichtungen lr, lr-tb, rl, rb, und rb-tl sind in HTML Kontexten nicht mehr zugelassen; 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()`;

Formaler 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

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

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

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

HTML

Das HTML legt die beiden <div> Blöcke fest, die mit ihren Klassen horizontal oder vertical präsentiert werden. Beide Boxen teilen die Klasse standard-box, die Färbung, Innenabstand 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 bietet standardmäßiges Styling 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, mit dem Wert eingestellt auf 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

Specification
CSS Logical Properties and Values 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
Einstellung der maximalen Größe in der anderen Richtung: max-inline-size
writing-mode

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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