Tachyons Layout Flexbox

Last Updated : 11 Jun, 2022

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= 
"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>

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= 
"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>