Primer CSS Flexbox Responsivo Flex Utilidades

Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.

Primer CSS Flexbox Responsive Las utilidades Flex proporcionan un modelo de diseño unidimensional flexible y con capacidad de respuesta que tiene diseños eficientes con espacios distribuidos entre los elementos dentro de un contenedor. Son útiles para crear diseños a pequeña escala y también son receptivos y compatibles con dispositivos móviles, ajustando su estructura de alineación. También se cuida el espaciado, el orden y la secuencia adecuados de los elementos.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <center>
            <h1 style="color:green;">
              GeeksforGeeks
            </h1>
            <strong>Primer CSS Flexbox</strong>
            <br/>
            <br/>
        </center>
        <div style="height:150px;" class=
              "border d-flex flex-items-start flex-sm-items-center
               flex-justify-start flex-lg-justify-between">
            <div class="p-5 border flex-sm-self-stretch">
              flex-sm-self-stretch box
            </div>
            <div class="p-5 border">box 2</div>
            <div class="p-5 border">box 3</div>
            <div class="p-5 border">box 4</div>            
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <center>
            <h1 style="color:green;">
              GeeksforGeeks
            </h1>
            <strong>Primer CSS Flexbox nowrap</strong>
            <br/>
            <br/>
        </center>
        <div style="height:150px;" class=
              "border d-flex flex-items-start">
            <div class="p-5 border flex-lg-nowrap">
              flex-lg-nowrap
            </div>
            <div class="p-5 border">box 2</div>
            <div class="p-5 border">box 3</div>
            <div class="p-5 border">box 4</div>    
            <div class="p-5 border">box 5</div>
            <div class="p-5 border">box 6</div>
            <div class="p-5 border">box 7</div>    
            <div class="p-5 border">box 8</div>                
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <center>
            <h1 style="color:green;">
              GeeksforGeeks
            </h1>
            <strong>Primer CSS Flexbox sm wrap</strong>
            <br/>
            <br/>
        </center>
        <div style="height:200px;" class=
              "border d-flex flex-items-start flex-sm-wrap">
            <div class="p-5 border">box 1</div>
            <div class="p-5 border">box 2</div>
            <div class="p-5 border">box 3</div>
            <div class="p-5 border">box 4</div>    
            <div class="p-5 border">box 5</div>
            <div class="p-5 border">box 6</div>
            <div class="p-5 border">box 7</div>    
            <div class="p-5 border">box 8</div>                
        </div>
    </div>
</body>
</html>

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *