Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y JavaScript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
En Foundation CSS, las clases Flexbox se utilizan para hacer que las alineaciones horizontales y verticales sean muy fáciles. Flexbox tiene clases de ordenación de origen que ordenan las columnas según el número especificado en la clase de orden.
Foundation CSS Flexbox Utilities Source Ordenar clases:
- small-order-n: esta clase se utiliza para especificar el orden de las columnas en el tamaño de pantalla pequeño de acuerdo con el número especificado.
- medium-order-n: esta clase se utiliza para especificar el orden de las columnas en el tamaño de pantalla medio de acuerdo con el número especificado.
- large-order-n: esta clase se utiliza para especificar el orden de las columnas en el tamaño de pantalla grande según el número especificado.
Sintaxis:
<div class="Source-Ordering-classes ">
...
</div>
Nota: Aquí n puede ser 1,2,3,…. según el número de columnas y su ordenación.
Ejemplo 1: Este ejemplo ilustra el uso de Flexbox Utilities Source Ordering usando la clase grid-margin-x .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Flexbox Utilities Source Ordering</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Flexbox Utilities Source Ordering</h3>
<div class="grid-x grid-margin-x">
<div class="cell small-6 large-4
small-order-3 medium-order-2
large-order-1 callout success">
small-3, medium-2 larger-1.
</div>
<div class="cell small-6 large-4
small-order-2 medium-order-1
large-order-3 callout alert">
small-2, medium-1 larger-3.
</div>
<div class="cell small-6 large-4
small-order-1 medium-order-3
large-order-2 callout warning">
small-1, medium-3 larger-2.
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Flexbox Utilidades Fuente Ordenar
Ejemplo 2: Este ejemplo ilustra el uso de Flexbox Utilities Source Ordering usando la clase grid-padding-x .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Flexbox Utilities Source Ordering</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Flexbox Utilities Source Ordering</h3>
<div class="grid-x grid-padding-x">
<div class="cell small-6 large-4
small-order-3 medium-order-2
large-order-1 callout success">
small-3, medium-2 larger-1.
</div>
<div class="cell small-6 large-4
small-order-2 medium-order-1
large-order-3 callout alert">
small-2, medium-1 larger-3.
</div>
<div class="cell small-6 large-4
small-order-1 medium-order-3
large-order-2 callout warning">
small-1, medium-3 larger-2.
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Flexbox Utilidades Fuente Ordenar
Referencia: https://get.foundation/sites/docs/flexbox-utilities.html#source-ordering