<display-legacy>

CSS 2 использовал синтаксис с одним ключевым словом для свойства display, требуя отдельных ключевых слов для блочных и строчных вариантов одного и того же режима макета. Эта страница описывает эти значения.

Синтаксис

Допустимые <display-legacy> значения:

inline-block

Элемент генерирует блок-элемент-боксы, которые будут выравниваться с окружающим содержимым, как если бы они были одним строчным боксом (ведя себя очень похоже на заменяемый элемент).

Это эквивалентно inline flow-root.

inline-table

Значение inline-table не имеет прямого соответствия в HTML. Оно ведет себя как элемент HTML <table>, но как строчный бокс, а не блочный бокс. Внутри табличного бокса находится контекст блочного уровня.

Это эквивалентно inline table.

inline-flex

Элемент ведет себя как строчный элемент и выстраивает свой контент в соответствии с моделью flexbox.

Это эквивалентно inline flex.

inline-grid

Элемент ведет себя как строчный элемент и выстраивает свой контент в соответствии с моделью сетки.

Это эквивалентно inline grid.

Формальный синтаксис

<display-legacy> = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

Примеры

В приведенном ниже примере мы создаем строчный контейнер flex с устаревшим ключевым словом inline-flex.

HTML

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item

CSS

.container {
  display: inline-flex;
}

Результат

В новом синтаксисе строчный контейнер flex создается с использованием двух значений: inline для внешнего типа отображения и flex для внутреннего типа отображения.

.container {
  display: inline flex;
}

Спецификации

Спецификация
CSS Модуль отображения уровня 3 # typedef-display-legacy

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-legacy`	57	1612	52	44	10.1	57	52	43	10.3	6.0 Samsung Internet добавлена ранее, чем соответствующая версия Chrome.	57

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-legacy`	2921	12	20 Firefox 28 добавил поддержку многострочного flexbox.	1615	97	2925	20 Firefox 28 добавил поддержку многострочного flexbox.	1614	97	2.01.5	4.44.4

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-legacy`	1	12	3	7	1	18	4	14	1	1.0	4.4

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-legacy`	1	12	1	7	1	18	4	14	1	1.0	4.4

css.properties.display.inline-block

Таблицы BCD загружаются только в браузере

css.properties.display.inline-table

Таблицы BCD загружаются только в браузере

css.properties.display.inline-flex

Таблицы BCD загружаются только в браузере

css.properties.display.inline-grid

Таблицы BCD загружаются только в браузере

См. также

display

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-legacy