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.
Las cuadrículas Flexbox se utilizan para obtener diseños receptivos. Las cuadrículas flexbox son útiles para mantener las columnas a la misma altura, justificar el contenido y alinear elementos verticalmente. Las clases de utilidad Flex se utilizan en columnas y contenedores div.
Primer CSS Flexbox Grids clases:
- col-*: Define el número de columnas hasta 12.
- d-flex: esta clase se usa para establecer un bloque que presenta su contenido usando el modelo flexbox.
- d-inline-flex: esta clase se usa para establecer un elemento en línea que presenta su contenido usando el modelo flexbox.
- flex-justify-start: esta clase se utiliza para justificar todos los elementos a la izquierda.
- flex-justify-end: esta clase se utiliza para justificar todos los elementos a la derecha.
- flex-justify-center: esta clase se utiliza para justificar elementos en el centro del contenedor.
- flex-justify- between: esta clase se utiliza para distribuir elementos de manera uniforme. El primer elemento está en la línea de inicio, el último elemento está en la línea final.
- flex-justify-around: esta clase se utiliza para distribuir elementos de manera uniforme con el mismo espacio alrededor de ellos.
- flex-items-start: esta clase se utiliza para alinear elementos al inicio del eje transversal.
- flex-items-end: esta clase se utiliza para alinear elementos al final del eje transversal.
- flex-items-center: esta clase se utiliza para alinear elementos con el centro del eje transversal.
- flex-items-baseline: esta clase se usa para alinear elementos a lo largo de sus líneas base.
- flex-items-stretch: esta clase se usa para estirar elementos desde el inicio del eje transversal hasta el final del eje transversal verticalmente.
Nota: Las clases anteriores se utilizan en combinación para obtener el resultado deseado según las necesidades de la aplicación.
Sintaxis:
<div class="o-container">
<div class="col-* d-flex">
...
</div>
<div class="col-* flex-justify-center flex-md-items-start">
...
</div>
</div>
Ejemplo: El siguiente código demuestra las cuadrículas Flexbox de Primer CSS mediante el uso de utilidades flexibles en contenedores y columnas.
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" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h4 class="font-bold">
Primer CSS Flexbox grids
</h4></br>
<div class="d-inline-flex flex-column flex-md-row
flex-items-center flex-md-items-center">
<div class="col-2 d-flex flex-items-center
flex-md-items-start">
<img class="width-full avatar mb-2 mb-md-0" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220520210735/geeksimage2-200x146.png"
alt="gfg" />
</div>
<div class="col-2 d-flex flex-items-center">
<img class="width-full avatar mb-2 mb-md-0" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220520210648/geeksimage-200x145.png"
alt="gfg" />
</div>
<div class="col-12 col-md-10 d-flex flex-column
flex-justify-center flex-items-center
flex-md-items-start pl-md-4">
<h1 class="text-normal">GFG</h1>
<p class="h4 text-normal mb-2">Data structures</p>
<a class="color-fg-muted text-small" href="#url">
https://www.geeksforgeeks.org/data-structures/
</a>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/grid#flexbox-grids
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA