Estas palabras clave especifican el interior del elemento. display type, que define el tipo de contexto de formato que presenta su contenido (asumiendo que es un elemento no reemplazado). Estas palabras clave se utilizan como valores de la display propiedad, y se puede utilizar para fines heredados como una sola palabra clave, o como se define en la especificación de Nivel 3 junto con un valor de la palabras clave.

Sintaxis

Válido valores:

flow Esta es una API experimental que no debe usarse en código de producción.
El elemento presenta su contenido utilizando un diseño de flujo (diseño de bloque e inline).

Si su tipo de pantalla exterior es inline o run-in, y está participando en un contexto de formato de bloque o en línea, luego genera un cuadro en línea. De lo contrario, genera una caja contenedor de bloques.

Dependiendo del valor de otras propiedades (como position, float, o overflow) y si él mismo participa en un bloque o en un contexto de formato en línea, establece un nuevo contexto de formato de bloque (BFC) para su contenido o integra su contenido en su contexto de formato principal.

flow-root
El elemento genera una caja de elemento de bloque que establece un nuevo contexto de formato de bloque, definiendo dónde se encuentra la raíz del formato.
table
Estos elementos se comportan como HTML

elementos. Define una caja a nivel de bloque.
flex
El elemento se comporta como un elemento de bloque y presenta su contenido de acuerdo con el modelo flexbox.
grid
El elemento se comporta como un elemento de bloque y presenta su contenido de acuerdo con el modelo de cuadrícula.
ruby Esta es una API experimental que no debe usarse en código de producción.
El elemento se comporta como un elemento en línea y presenta su contenido de acuerdo con el modelo de formato ruby. Se comporta como el HTML correspondiente elementos.

Nota: Navegadores que admiten la sintaxis de dos valores, solo para buscar el valor interno, como cuando display: flex o display: grid está especificado, establecerá su valor externo en block. Esto resultará en un comportamiento esperado; por ejemplo, si especifica un elemento para ser display: grid, esperaría que la caja creada en el contenedor de la cuadrícula fuera una caja de nivel de bloque.

Ejemplos de

En este ejemplo, se ha proporcionado el cuadro principal display: flow-root y así establece un nuevo BFC y contiene el elemento flotante.

HTML

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

CSS

.boxbackground-color:rgb(224, 206, 247);border: 5px solid rebeccapurple;display: flow-root;.floatfloat: left;width: 200px;height: 150px;background-color: white;border:1px solid black;padding: 10px;

Resultado

Especificaciones

Especificación Estado
Módulo de visualización CSS nivel 3
La definición de ‘display-inside’ en esa especificación.		 Recomendación candidata

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
display-inside No 12-79 38 7 No No No No 38 No No No
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
display-inside 2921 12 20 Firefox 28 agregó compatibilidad con flexbox multilínea. 11IE coloca incorrectamente el contenido del bloque en línea dentro de los contenedores flexibles. Ver el discusión sobre Microsoft Answers.8IE coloca incorrectamente el contenido del bloque en línea dentro de los contenedores flexibles. Ver el discusión sobre Microsoft Answers. 161512.1-15 96,1 4.4≤37 2925 20 Firefox 28 agregó compatibilidad con flexbox multilínea. 161412.1-14 97 2.01.5
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
display-inside 57 1612 52 10Internet Explorer implementa una versión anterior de la especificación. 44 10.1 57 57 52 43 10,3 6.0 Samsung Internet agregó esto antes de lo que indicaría la versión correspondiente de Chrome.
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
display-inside 1 12 1 8 7 1 ≤37 18 4 14 1 1.0
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
display-inside 58 79 53 No 45 13 58 58 53 43 13 7.0
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
display-inside No No 70 No No No No No No No No No

Las tablas BCD solo se cargan en el navegador

Soporte de flow-root

Las tablas BCD solo se cargan en el navegador

Soporte de mesa

Las tablas BCD solo se cargan en el navegador

Soporte de rejilla

Las tablas BCD solo se cargan en el navegador

Soporte de flex

Las tablas BCD solo se cargan en el navegador

Soporte de ruby

Las tablas BCD solo se cargan en el navegador

Ver también

  • display
  • Conceptos básicos de Flexbox
  • Conceptos básicos de diseño de cuadrícula