Тип CSS `<display-legacy>`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Синтаксис

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

inline-block

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

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

inline-table

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

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

inline-flex

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

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

inline-grid

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

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

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

<display-legacy> = 
  inline-block |
  inline-list-item |
  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 Display Module Level 3 # typedef-display-legacy

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`inline-block`	1	12	1	7	1	18	4	14	1	1.0	4.4	1
`inline-table`	1	12	3	7	1	18	4	14	1	1.0	4.4	1
`inline-flex`	29 21	12	20 В Firefox 28 добавлена поддержка многострочного flexbox.	16 15	9 7	29 25	20 В Firefox for Android 28 добавлена поддержка многострочного flexbox.	16 14	9 7	2.0 1.5	4.4 4.4	9 7
`inline-grid`	57	16 12	52	44	10.1	57	52	43	10.3	6.0 Браузер Samsung добавил эту возможность раньше, чем можно было бы предположить по соответствующей версии Chrome.	57	10.3

См. также

display

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