Tachyons Layout Flexbox
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/
Please Login to comment...