max-inline-size
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS max-inline-size xác định kích thước tối đa theo chiều ngang hoặc chiều dọc của khối phần tử, tùy thuộc vào chế độ viết của nó. Nó tương ứng với thuộc tính max-width hoặc max-height, tùy thuộc vào giá trị của writing-mode.
Nếu chế độ viết theo chiều dọc, giá trị của max-inline-size liên quan đến chiều cao tối đa của phần tử; ngược lại, nó liên quan đến chiều rộng tối đa của phần tử. Thuộc tính liên quan là max-block-size, xác định chiều còn lại của phần tử.
Try it
max-inline-size: 150px;
writing-mode: horizontal-tb;
max-inline-size: 150px;
writing-mode: vertical-rl;
max-inline-size: 20px;
writing-mode: horizontal-tb;
max-inline-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 max-inline-size.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: white;
}
Cú pháp
/* Giá trị <length> */
max-inline-size: 300px;
max-inline-size: 25em;
max-inline-size: anchor-size(width);
max-inline-size: anchor-size(--my-anchor self-block, 200px);
/* Giá trị <percentage> */
max-inline-size: 75%;
/* Giá trị từ khóa */
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fit-content(20em);
/* Giá trị toàn cục */
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: revert;
max-inline-size: revert-layer;
max-inline-size: unset;
Giá trị
Thuộc tính max-inline-size nhận các giá trị giống như thuộc tính max-width và max-height.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | same as width and height |
| Inherited | no |
| Percentages | inline-size of containing block |
| Computed value | same as max-width and max-height |
| Animation type | a length, percentage or calc(); |
Cú pháp hình thức
max-inline-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
Ví dụ
Đặt kích thước inline tối đa bằng pixel
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 100%;
max-inline-size: 200px;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-max-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính vật lý tương ứng:
max-widthvàmax-height writing-mode