Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean 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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Los componentes de ejemplo de Primer CSS Flexbox se utilizan para crear los diversos componentes en Primer CSS utilizando las clases de Flexbox. Podemos crear el objeto de medios usando las clases de flexbox.
Componentes de ejemplo de Primer CSS Flexbox:
- Objeto multimedia: este componente Flexbox se utiliza para crear el objeto multimedia básico con texto e imágenes.
- Objeto multimedia receptivo: este componente Flexbox se utiliza para crear el objeto multimedia que sería receptivo. Se centrará verticalmente en pantallas grandes y se apilará en ventanas pequeñas.
Primer CSS Flexbox Clases de componentes de ejemplo:
- d-flex: esta clase se utiliza para crear el contenedor flexbox.
Sintaxis:
<div class="d-flex">
<div class="border">
...
</div>
<p>
...
</p>
</div>
Ejemplo 1: Este ejemplo demuestra la implementación de los componentes de ejemplo de Primer CSS Flexbox utilizando un objeto multimedia con 1 imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Example Components </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Flexbox Example Components </h3> <br> <div class="border d-flex flex-items-center"> <div class="d-flex flex-justify-center"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" /> </div> <p class="pl-3"> <strong> GeeksforGeeks: </strong> <br> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo demuestra la implementación de los componentes de ejemplo de Primer CSS Flexbox con un objeto multimedia sensible .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Example Components </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Flexbox Example Components </h3> <br> <h3> Responsive media object </h3> <div class="m-2 border d-flex flex-column flex-sm-row flex-sm-items-center"> <div class="p-2 d-flex flex-justify-center flex-sm-justify-start"> <img style="max-width:120px;max-height:120px;" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> </div> <p class="pl-4 m-0"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. A Computer Science portal for geeks. </p> <div class="d-flex flex-justify-center"> <img style="max-width:80px; max-height:80px;" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" /> </div> <div class="ml-sm-3 d-flex flex-justify-center"> <svg class="octicon color-bg-success-emphasis color-fg-danger" viewBox="0 0 14 16" width="18" height="20" > <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> </div> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/flexbox#example-components
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA