files/ru/web/css/max-block-size/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---
title: max-block-size
slug: Web/CSS/max-block-size
translation_of: Web/CSS/max-block-size
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p>

<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
max-block-size: 300px;
max-block-size: 25em;

/* &lt;percentage&gt; 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: fill-available;

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<h3 id="Values">Values</h3>

<p>Свойство <code>max-block-size</code> принимает такие же значения как {{cssxref("max-width")}} и {{cssxref("max-height")}} свойства.</p>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre>{{csssyntax}}</pre>

<h2 id="Example">Example</h2>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
</pre>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css">.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-block-size: 200px;
}</pre>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
   <td>{{Spec2("CSS Logical Properties")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("41.0") }}<sup><a href="#compat_hint1">[1]</a></sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Available since Gecko 38, but behind the preference <code>layout.css.vertical-text.enabled</code>, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The mapped physical properties: {{cssxref("max-width")}} and {{cssxref("max-height")}}</li>
 <li>{{cssxref("writing-mode")}}</li>
</ul>