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