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í.
Primer CSS Flexbox Las clases Flex se utilizan para definir la capacidad de un elemento flexible para modificar sus dimensiones para llenar el espacio disponible. Cuando trabaja con varios tipos de componentes similares, Flex es la característica más útil para usar. Hay 4 clases de flex en Primer CSS Flexbox flex, todas ellas se mencionan y describen a continuación.
Primer CSS Flexbox Flex Clases:
- flex-1: esta clase se utiliza para llenar el espacio disponible restante.
- flex-auto: esta clase se usa para llenar el espacio disponible y los tamaños automáticos según el contenido.
- flex-grow-0: esta clase se utiliza para restringir la función de crecimiento de cualquier elemento.
- flex-shrink-0: esta clase se utiliza para restringir la función de crecimiento de cualquier elemento.
Sintaxis: en esta sintaxis, usaremos solo una clase, se pueden usar otras clases como reemplazo.
<div class="border d-flex">
<div class="...">...</div>
<div class="... flex-1">...</div>
<div class="...">...</div>
</div>
A continuación se muestran ejemplos que ilustran el Primer CSS Flexbox Flex:
Ejemplo 1: En este ejemplo, usaremos las clases flex-1 y flex-auto .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h4 class="text-center font-bold"> Primer CSS Flexbox Flex </h4> <strong>Flexbox flex-1 Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis flex-1"> .flex-1 </div> <div class="p-5 border color-bg-danger-emphasis"> A Computer Portal </div> </div> <strong>Flexbox flex-auto Class:</strong> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis flex-1"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis flex-auto"> .flex-auto </div> <div class="p-5 border color-bg-danger-emphasis flex-1"> A Computer Portal </div> </div> </body> </html>
Producción:
Cartilla CSS Flexbox Flex
Ejemplo 2: En este ejemplo, usaremos las clases flex-grow-0 y flex-shrink-0 .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h4 class="text-center font-bold"> Primer CSS Flexbox Flex </h4> <strong>Flexbox flex-shrink-0 Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis"> A Computer Portal </div> <div class="p-5 border color-bg-danger-emphasis flex-shrink-0"> flex-shrink-0 </div> </div> <strong>Flexbox flex-grow-0 Class:</strong> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis flex-1"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis flex-auto flex-grow-0"> .flex-grow-0 </div> <div class="p-5 border color-bg-danger-emphasis flex-1"> A Computer Portal </div> </div> </body> </html>
Producción:
Cartilla CSS Flexbox Flex
Referencia: https://primer.style/css/utilities/flexbox#flex
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA