Diseño
display
Utilidades para controlar el tipo de caja de visualización (display) de un elemento.
| Clase | Estilos |
|---|---|
inline | display: inline; |
block | display: block; |
inline-block | display: inline-block; |
flow-root | display: flow-root; |
flex | display: flex; |
inline-flex | display: inline-flex; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
table | display: table; |
inline-table | display: inline-table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group; |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row-group | display: table-row-group; |
table-row | display: table-row; |
list-item | display: list-item; |
hidden | display: none; |
sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0; |
not-sr-only | position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal; |
Ejemplos
Block e Inline
Utiliza las utilidades inline, inline-block y block para controlar el flujo de texto y elementos:
Mientras que el uso de la propiedad display: inline-block ajustará el elemento para evitar que el texto interior se extienda más allá de su padre.
Por último, el uso de la propiedad display: block colocará el elemento en su propia línea y llenará a su elemento padre.
<p> Al controlar el flujo del texto, el uso de la propiedad CSS <span class="inline">display: inline</span> hará que el texto dentro del elemento se ajuste normalmente.</p><p> Mientras que el uso de la propiedad <span class="inline-block">display: inline-block</span> ajustará el elemento para evitar que el texto interior se extienda más allá de su padre.</p><p> Por último, el uso de la propiedad <span class="block">display: block</span> colocará el elemento en su propia línea y llenará a su elemento padre.</p>Flow Root
Utiliza la utilidad flow-root para crear un elemento a nivel de bloque con su propio contexto de formato de bloque:
<div class="p-4"> <div class="flow-root ..."> <div class="my-4 ...">Bueno, déjame decirte algo, ...</div> </div> <div class="flow-root ..."> <div class="my-4 ...">Claro, adelante, ríete si quieres...</div> </div></div>Flex
Utiliza la utilidad flex para crear un contenedor flex a nivel de bloque:
<div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Andrew Alfred</strong> <span>Asesor técnico</span> </div></div>Inline Flex
Utiliza la utilidad inline-flex para crear un contenedor flex en línea que fluya con el texto:
Hoy pasé la mayor parte del día investigando formas de aprovechar el hecho de que las botellas se pueden devolver por 10 centavos en Michigan, pero solo por 5 centavos aquí.
<p> Hoy pasé la mayor parte del día investigando formas de ... <span class="inline-flex items-baseline"> <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" /> <span>Kramer</span> </span> me sigue diciendo que no hay forma de hacerlo funcionar, que ...</p>Grid
Utiliza la utilidad grid para crear un contenedor de cuadrícula (grid):
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>Inline Grid
Utiliza la utilidad inline-grid para crear un contenedor de cuadrícula en línea:
<span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span><span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span>Contents
Utiliza la utilidad contents para crear un contenedor "fantasma" cuyos elementos hijos actúen como hijos directos del padre:
<div class="flex ..."> <div class="flex-1 ...">01</div> <div class="contents"> <div class="flex-1 ...">02</div> <div class="flex-1 ...">03</div> </div> <div class="flex-1 ...">04</div></div>Table
Utiliza las utilidades table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group y table-footer-group para crear elementos que se comporten como sus respectivos elementos de tabla:
<div class="table w-full ..."> <div class="table-header-group ..."> <div class="table-row"> <div class="table-cell text-left ...">Canción</div> <div class="table-cell text-left ...">Artista</div> <div class="table-cell text-left ...">Año</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div> <div class="table-cell ...">Malcolm Lockyer</div> <div class="table-cell ...">1961</div> </div> <div class="table-row"> <div class="table-cell ...">Witchy Woman</div> <div class="table-cell ...">The Eagles</div> <div class="table-cell ...">1972</div> </div> <div class="table-row"> <div class="table-cell ...">Shining Star</div> <div class="table-cell ...">Earth, Wind, and Fire</div> <div class="table-cell ...">1975</div> </div> </div></div>Oculto (Hidden)
Utiliza la utilidad hidden para eliminar un elemento del documento:
<div class="flex ..."> <div class="hidden ...">01</div> <div>02</div> <div>03</div></div>Para ocultar visualmente un elemento pero mantenerlo en el documento, utiliza la propiedad de visibilidad en su lugar.
Solo para lectores de pantalla
Utiliza sr-only para ocultar visualmente un elemento sin ocultarlo de los lectores de pantalla:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Configuración</span> </a>Utiliza not-sr-only para deshacer sr-only, haciendo que un elemento sea visible para los usuarios videntes así como para los lectores de pantalla:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Configuración</span></a>Esto puede ser útil cuando deseas ocultar visualmente algo en pantallas pequeñas pero mostrarlo en pantallas más grandes, por ejemplo.
Diseño responsivo
Antepone a la utilidad display el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="flex md:inline-flex ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.