CSS - Свойство max-inline-size: Пособие для начинающих

Здравствуйте, будущие маги CSS! Сегодня мы окунемся в захватывающий мир свойства max-inline-size. Не волнуйтесь, если вы новички; я буду вашим доброжелательным проводником в этом приключении CSS. Так что возьмите杯 кофе (или чай, если это ваше дело), и давайте начнем!

Что такое max-inline-size?

Прежде чем мы углубимся в детали, давайте поймем, что такое max-inline-size. Представьте, что вы пытаетесь впихнуть очень длинное слово в маленькую коробку. Это kinda то, с чем помогает нам max-inline-size в CSS. Оно устанавливает максимальный размер элемента в направлени inline.

"Но подожди," может быть вы спросите, "что такое направлени inline?" Отличный вопрос! В английском и многих других языках направлени inline горизонтальное - слева направо. Однако, в некоторых языках, таких как арабский или иврит, оно справа налево. А в вертикальных режимах письма, оно может быть сверху вниз!

Possible Values (Возможные значения)

Теперь давайте посмотрим на различные значения, которые мы можем использовать с max-inline-size. Вот удобная таблица для вас:

Значение	Описание
<length>	Фиксированная длина, например 300px или 20em
<percentage>	Процент размера содержащего блока
none	Нет ограничений на размер ( это значение по умолчанию)
max-content	Внутренний preferred размер
min-content	Внутренний минимальный размер
fit-content	Использует доступное пространство, но не меньше min-content и не больше max-content

Не волнуйтесь, если некоторые из этих значений кажутся вам сейчас непонятными. Мы рассмотрим каждый из них с примерами!

Applies To (Применяется к)

Свойство max-inline-size применяется ко всем элементам, кроме:

• Не置换имых inline элементов
• Строк таблиц
• Групп строк

Syntax (Синтаксис)

Основной синтаксис для max-inline-size довольно прост:

max-inline-size: значение;

Легко, правда? Теперь давайте перейдем к конкретным примерам!

CSS max-inline-size - Value (Значение )

Давайте начнем с простого примера с фиксированной длиной:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Это ящик с max-inline-size, установленным в 300px. Содержимое будет перехватываться, если оно exceeds эту ширину.
</div>

В этом примере мы установили max-inline-size в 300 пикселей. Это означает, что вне зависимости от того, сколько содержимого мы положим внутрь .box, оно не будет растягиваться более 300px в направлени inline (что в данном случае горизонтально). Если содержимое слишком длинное, оно будет перехватываться на следующую строку.

CSS max-inline-size - Value (Значение )

Теперь давайте попробуем использовать значение в процентах:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
Этот ящик имеет max-inline-size, установленный в 50% ширины своего контейнера.
</div>
</div>

В этом случае .box будет иметь максимальный размер inline 50% ширины своего контейнера. Так что, если контейнер имеет ширину 500px, ящик не будет exceed 250px в ширину.

CSS max-inline-size - Value (Значение )

Значение max-content особенно интересно. Оно устанавливает максимальный размер inline в preferred размер содержимого. Давайте посмотрим, как это работает:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
Этот ящик расширится, чтобы вместить свое содержимое, но не будет перехватываться,除非 вынужден.
</div>

С max-content ящик расширится, чтобы вместить все свое содержимое на одну строку, только перехватываясь, если это вынуждено (например, если он достигает края окна).

CSS max-inline-size - With Vertical Text (С вертикальным текстом)

Теперь, для чего-то немного другого! Давайте посмотрим, как max-inline-size работает с вертикальным текстом:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
Этот текст vertical, и max-inline-size ограничивает его высоту!
</div>

В этом примере мы использовали writing-mode: vertical-rl, чтобы сделать текст vertical и справа налево. Теперь max-inline-size на самом деле ограничивает высоту ящика, потому что в вертикальном режиме письма направлени inline vertical!

Wrapping Up (Итог)

И вот мы и добрались до конца, друзья! Мы рассмотрели свойство max-inline-size от начала до конца (или, точнее, от начала inline до конца inline?). Помните, что CSS - это все о экспериментах. Не бойтесь играть с этими свойствами и смотреть, что happens. Так мы все и учились!

Прежде чем я отпущу вас, вот шутка, чтобы запомнить max-inline-size: Почему CSS свойство пошло в健身房? Чтобы поработать над своим max-inline-size, конечно!

Счастливого кодирования, и пусть ваши макеты всегда будут гибкими, а содержимое всегда будет подходящим как раз!

Credits: Image by storyset