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í.
Las clases de orden de Primer CSS Flexbox se utilizan para definir el orden de los elementos flexibles como si pudiéramos ordenarlos según nuestras necesidades. El segundo elemento flexible se puede colocar primero o en el lugar que desee.
Primer CSS Flexbox Order: El número utilizado para la colocación se puede aumentar según el número de elementos flexibles.
- flex-order-1: esta clase se utiliza para colocar el artículo flexible en el pedido 1.
- flex-order-2: esta clase se utiliza para colocar el artículo flexible en el pedido 2.
- flex-order-none: esta clase se utiliza para terminar el sistema de pedidos en orden de caja flexible.
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-order-1">...</div>
<div class="...">...</div>
</div>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Flexbox Order.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Order </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 Order </h4> <strong>Flexbox flex-order-1 Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis flex-order-1"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-order-2 Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis flex-order-2"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis "> Flex item 3 </div> </div> </body> </html>
Producción:
Primer CSS Flexbox Orden
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Flexbox Order.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Order </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 Order </h4> <strong>Flexbox flex-order-none Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis flex-order-1 flex-order-none"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-order-n Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis flex-order-2"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis "> Flex item 3 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 4 </div> <div class="p-5 border color-bg-danger-emphasis "> Flex item 5 </div> </div> </body> </html>
Producción:
Primer CSS Flexbox Orden
Referencia: https://primer.style/css/utilities/flexbox#order
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA