Open In App

Bulma Flexbox

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

A flexbox is a layout used to define various columns and rows that makes the grid-like structure. It is used to design a flexible responsive layout structure without using float or positioning.

Bulma Flexbox Components:

  • Flex Direction: The flex-direction property allows the user to set the direction of items in a flex container with direction utilities, like row, row-reverse, column, column-reverse. 
  • Flex Wrap: The flex-wrap property in Bulma allows the user to wrap the flex items either into a single line or wrapped onto multiple lines in a container. 
  • Justify Content: It is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. 
  • Align content: The align-content is used to specify the alignment between the lines inside a flexible container.
  • Align items: It is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis.
  • Align Self: It is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.
  • Flex grow and flex shrink: The Flex-grow tells whether the flex item can get extra space or not & the flex-shrink deals with the space not needed by flex items. These classes are used to specify how much the item will grow compared to other items inside that container.

Syntax:

<div class="Flexbox-Component-Class">
  ...
</div>

Example 1: In the below example, we will make use of the ‘is-flex-direction-row-reverse‘ to change the direction of the element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="container">
        <h1 class="title has-text-centered">
            GeeksforGeeks
        </h1>
        <div class="columns is-flex-direction-row-reverse">
            <div class="p-2 bd-highlight 
                has-background-primary"> 1 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 2 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 3 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 4 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 5 </div>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: In the below example, we will make use of the ‘is-flex-direction-row‘ to change the size of the element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="container">
        <h1 class="title has-text-centered">
            GeeksforGeeks
        </h1>
        <div class="columns is-flex-direction-row">
            <div class="p-2 bd-highlight
                has-background-danger"> one 
            </div>
            <div class="p-2 bd-highlight
                has-background-warning"> two 
            </div>
            <div class="p-2 bd-highlight
                has-background-danger"> three 
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://bulma.io/documentation/helpers/flexbox-helpers/



Last Updated : 26 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads