Tachyons is a toolkit that is used to create a responsive website. In this article, we will learn about how to make a flex layout using the Tachyons toolkit. Flexbox is used to achieve powerful horizontal or vertical layouts without JavaScript.
Syntax:
<element-name class="flex">...</element-name>
Tachyons Layout Flexbox Classes:
- flex: This class is used to declare the class flex on an element that will collect all its children into a single row.
- flex-wrap: This class is used to specify flex-wrap will cause child elements to wrap to multiple rows once they take more width than their parent.
- flex-wrap-reverse: This class is used to specify flex-wrap-reverse reverses the ordering of rows.
- flex-column: This class is used to specify column layouts that are achievable with flex-column.
- flex-column-reverse: This class is used reverse the column layout with flex-column-reverse.
Align items:
- flex items-center: This class is used to pack items from the center with items-center
- flex items-start: This class is used to pack items from the start with items-start
- flex items-end: This class is used to pack items from the end with items-end
Justify content:
- flex justify-center: This class is used to align the flexible container’s items in the center.
- flex justify-between: This class is used to align the flexible container’s items in the center.
- flex justify-around: This class is used to align the flexible container’s items in the center.
Example 1: In this example, we will make use of flex class for layout.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet"
href=
<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>
|
Output:
Example 2: In the below code, we have used the flex-column class that is used to specify column layouts that are achievable with flex-column.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<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>
|
Output:
Reference: https://tachyons.io/docs/layout/flexbox/