Referencia completa de Tailwind CSS Flexbox

Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. El flexbox de CSS es una característica vital para desarrollar la interfaz, hay cuatro direcciones disponibles en CSS, por lo que en Tailwind CSS todas las propiedades están cubiertas como en el formulario de clase. teníamos clases alternativas de Tailwind CSS Flex para un desarrollo rápido de front-end como Tailwind CSS Flex Direction, Flex wrap, Flex, etc.

El siguiente ejemplo le dará una breve idea sobre el Flexbox de Tailwind CSS:

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Tailwind flex-1 Class</title>
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body>
    <h1 class="text-center text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <p class="text-center font-bold">Tailwind CSS flex-1 Class</p>
  
  
    <div id="main" class="bg-green-200 border-4
                        border-green-600 w-2/3 ml-32">
        <p class="ml-2">This is the effect of flex-1:</p>
  
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-1">
                Geeksforgeeks
            </div>
            <div class="bg-green-800 flex-1">
                Tailwind CSS
            </div>
        </div>
        <p class="ml-2">
                This is the effect of flex-initial:
        </p>
  
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-initial">
                Geeksforgeeks
            </div>
            <div class="bg-green-800 flex-initial">
                A Computer Science for Geeks
            </div>
        </div>
        <p class="ml-2">
            This is the effect of flex-auto:
        </p>
  
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-auto">
                CSS
            </div>
            <div class="bg-green-800 flex-auto">
                Cascading Style Sheet
            </div>
        </div>
        <p class="ml-2">
                This is the effect of flex-none:
        </p>
  
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-none">
                HTML
            </div>
            <div class="bg-green-800 flex-none">
                Hypertext Markup Langauge
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Tailwind CSS Flexbox

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta