Тип CSS `<display-inside>`

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

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

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

Синтаксис

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

flow

Элемент располагает содержимое с использованием поточной раскладки (блочной и строчной раскладки).

Если его внешний тип отображения — inline и он участвует в блочном или строчном контексте форматирования, то он создаёт строчный блок. В противном случае он создаёт блочный контейнер.

В зависимости от значения других свойств (таких как position, float или overflow), а также от того, участвует ли сам элемент в блочном или строчном контексте форматирования, он либо создаёт новый блочный контекст форматирования (BFC) для своего содержимого, либо включает содержимое в родительский контекст форматирования.

flow-root

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

table

Эти элементы ведут себя подобно HTML-элементам <table>. Они задают блок блочного уровня.

flex

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

grid

Элемент ведёт себя как блочный элемент и располагает содержимое согласно модели сетки.

ruby

Элемент ведёт себя как строчный элемент и располагает содержимое согласно модели форматирования ruby. Он ведёт себя подобно соответствующим HTML-элементам <ruby>.

Примечание: Браузеры, поддерживающие синтаксис с двумя значениями, если указано только внутреннее значение, например display: flex или display: grid, задают для внешнего значения block. Это обеспечивает ожидаемое поведение: например, если задать для элемента значение display: grid, можно ожидать, что блок, созданный в контейнере сетки, будет блочным.

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

<display-inside> = 
  flow |
  flow-root |
  table |
  flex |
  grid |
  ruby

Примеры

В этом примере для родительского блока задано значение display: flow-root, поэтому он создаёт новый BFC и содержит плавающий элемент.

HTML

<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

CSS

.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

Результат

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

Спецификация
Модуль CSS Display, уровень 3 # typedef-display-inside

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`flow-root`	58	79	53	45	13	58	53	43	13	7.0	58	13
`table`	1	12	1	7	1	18	4	14	1	1.0	4.4	1
`flex`	29 21	12	20 В Firefox 28 добавлена поддержка многострочного flexbox.	16 15 12.1–15	9 7	29 25	20 В Firefox для Android 28 добавлена поддержка многострочного flexbox.	16 14 12.1–14	9 7	2.0 1.5	4.4 4.4	9 7
`grid`	57	16 12	52	44	10.1	57	52	43	10.3	6.0 В Samsung Browser эта возможность появилась раньше, чем можно предположить по соответствующей версии Chrome.	57	10.3
`ruby`	121	121 12–79	38	107	Нет	121	38	81	Нет	25.0	121	Нет

См. также

© 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-inside