Bulma Flexbox

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=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</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=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> 
</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/

Explore