Flexbox o contenedor flexible es un diseño que permite a los usuarios alinear y distribuir elementos dentro de un contenedor. Tailwind CSS ofrece varias clases de utilidades para crear y trabajar con flexbox. Un contenedor flexible a nivel de caja es un contenedor flexible que se comporta/actúa como un elemento a nivel de bloque y crea un bloque. Ocupa todo el ancho de su elemento principal y crea una nueva línea después de sí mismo.
Este artículo ejemplificará el método de creación de un contenedor flexible a nivel de bloque en Tailwind.
¿Cómo crear/hacer un contenedor flexible a nivel de bloque en Tailwind?
Para crear un contenedor flexible a nivel de bloque particular en Tailwind, cree una estructura HTML. Luego, agregue el “ doblar ” clase de utilidad con el
Sintaxis
< división clase = 'doblar ...' >
...
división >
Código
< cuerpo >
< división clase = 'espacio flexible-2 m-2 borde-2 borde-negro' >
< división clase = 'bg-amarillo-500 p-4' > Primer elemento división >
< división clase = 'bg-amarillo-500 p-4' > Segundo artículo división >
< división clase = 'bg-amarillo-500 p-4' > Tercer artículo división >
división >
cuerpo >
Aquí, en el contenedor padre
-
- “ doblar La clase ” se utiliza para crear un contenedor flexible a nivel de bloque.
- “ brecha-2 La clase ” agrega 2 unidades de espacio entre los elementos secundarios de flex.
- “ m-2 La clase ” agrega 2 unidades de margen a todos los lados del contenedor.
- “ frontera-2 La clase ” agrega el borde al contenedor con 2 unidades de ancho.
- “ borde-negro La clase ” establece el color del borde en negro.
En los elementos flexibles secundarios:
-
- “ bg-amarillo-500 La clase ” aplica un color amarillo al fondo del elemento flexible.
- “ p-4 La clase ” agrega el relleno de 4 unidades a todos los lados de los elementos flexibles.
Producción
En el resultado anterior, el borde representa que el contenedor es un contenedor flexible a nivel de bloque, que ocupa todo el ancho de su elemento principal (navegador).
Alternativamente, el usuario puede asegurarse de esto al inspeccionar el elemento del contenedor flexible en la página web:
El resultado anterior indica que el contenedor es un contenedor flexible a nivel de bloque.
Conclusión:
Para crear un contenedor flexible a nivel de bloque en Tailwind, se requiere agregar el ' doblar ” clase de utilidad con el contenedor en particular y especificar sus elementos secundarios. Los usuarios pueden definir y modificar elementos flexibles según sus necesidades. Para la verificación, agregue el borde al contenedor y vea la página web o inspeccione ese elemento en la página web. Este artículo ha explicado el método para crear un contenedor flexible a nivel de bloque en Tailwind.