Tachyons es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo hacer un diseño flexible usando el kit de herramientas Tachyons. Flexbox se utiliza para lograr potentes diseños horizontales o verticales sin JavaScript.
Sintaxis:
<element-name class="flex">...</element-name>
Clases Flexbox de diseño de taquiones:
- flex: esta clase se usa para declarar la clase flex en un elemento que reunirá a todos sus elementos secundarios en una sola fila.
- flex-wrap: esta clase se usa para especificar que flex-wrap hará que los elementos secundarios se ajusten a varias filas una vez que toman más ancho que su padre.
- flex-wrap-reverse: esta clase se usa para especificar flex-wrap-reverse invierte el orden de las filas.
- flex-column: esta clase se usa para especificar diseños de columnas que se pueden lograr con flex-column.
- flex-column-reverse: esta clase se usa para invertir el diseño de la columna con flex-column-reverse.
Alinear elementos:
- flex items-center: esta clase se usa para empacar artículos desde el centro con items-center
- flex items-start: esta clase se usa para empaquetar artículos desde el principio con items-start
- flex items-end: esta clase se usa para empaquetar artículos desde el final con items-end
Justificar el contenido:
- flex justifica-centro: esta clase se utiliza para alinear los elementos del contenedor flexible en el centro.
- flex justifica-entre: Esta clase se usa para alinear los elementos del contenedor flexible en el centro.
- flex justifica-alrededor: Esta clase se utiliza para alinear los elementos del contenedor flexible en el centro.
Ejemplo 1: En este ejemplo, utilizaremos la clase flex para el diseño.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 5px;
}
h1 {
color: green;
}
div {
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="flex">
<div class="outline w-25 pa3 mr2">
<code>1</code>
</div>
<div class="outline w-25 pa3 mr2">
<code>2</code>
</div>
<div class="outline w-25 pa3 mr2">
<code>3</code>
</div>
<div class="outline w-25 pa3 mr2">
<code>4</code>
</div>
<div class="outline w-25 pa3">
<code>5</code>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, hemos usado la clase de columna flexible que se usa para especificar diseños de columna que se pueden lograr con columna flexible.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 5px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="flex flex-column">
<div class="outline w-25 pa3 ma2 ml7">
<span>1</span>
</div>
<div class="outline w-25 pa3 ma2 ml7">
<span>2</span>
</div>
<div class="outline w-25 pa3 ma2 ml7">
<span>3</span>
</div>
<div class="outline w-25 pa3 ma2 ml7">
<span>4</span>
</div>
<div class="outline w-25 pa3 ma2 ml7">
<span>5</span>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/flexbox/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA