<display-inside>

Эти ключевые слова задают внутренний тип display элемента, который определяет тип контекста форматирования, который выкладывает его содержимое (предполагается, что это элемент, не являющийся замещаемым). Эти ключевые слова используются в качестве значений свойства display, и могут использоваться для обратной совместимости в виде единственного ключевого слова или, как определено в спецификации Level 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 Module Level 3 # typedef-display-inside

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-inside`	121	12–79	38	107	Нет	121	38	81	Нет	25.0	121

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-inside`	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 for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-inside`	2921	12	20 Firefox 28 добавила поддержку многострочного flexbox.	161512.1–15	97	2925	20 Firefox 28 добавила поддержку многострочного flexbox.	161412.1–14	97	2.01.5	4.44.4

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`display-inside`	58	79	53	45	13	58	53	43	13	7.0	58