Bulma Flex Direction

In this article, we'll be seeing flex-direction in Bulma. In Bulma, the flexbox properties are used as helpers. 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. Sometimes, the horizontal classes can be omitted as the default direction in the browser is row.

Flex-Direction classes:

is-flex-direction-row: This class of flexbox allows the user to set a horizontal direction of the flex item.
is-flex-direction-row-reverse: This class of flexbox allows the user to set a horizontal direction of the flex item in reverse or the opposite way.
is-flex-direction-column: This class of flexbox allows the user to set a vertical direction of the flex item.
is-flex-direction-column-reverse: This class of flexbox allows the user to set a vertical direction of the flex item in reverse or the opposite way.

Syntax:

// flex-row
<div class="is-flex-direction-row">
....
</div>

// flex-row-reverse
<div class="is-flex-direction-row-reverse">
....
</div>

// flex-column
<div class="is-flex-direction-column">
....
</div>

// flex-column-reverse
<div class="is-flex-direction-column-reverse">
....
</div>

Example 1: Below examples illustrate the Bulma flex-row direction:

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-primary">
              Flex item 1
            </div>
            <div class="p-2 bd-highlight 
                        has-background-warning">
              Flex item 2
            </div>
            <div class="p-2 bd-highlight 
                        has-background-danger">
              Flex item 3
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: Below examples illustrate the Bulma flex-row-reverse direction:

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-grey-lighter">
              Flex item 1
            </div>
            <div class="p-2 bd-highlight
                        has-background-primary">
              Flex item 2
            </div>
            <div class="p-2 bd-highlight 
                        has-background-warning">
              Flex item 3
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 3: Below examples illustrate the Bulma flex-column direction:

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="is-flex-direction-column">
            <div class="p-2 bd-highlight 
                        has-background-grey-lighter">
              Flex item 1
            </div>
            <div class="p-2 bd-highlight 
                        has-background-primary">
              Flex item 2
            </div>
            <div class="p-2 bd-highlight 
                        has-background-warning">
              Flex item 3
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 4: Below examples illustrate the Bulma flex-column-reverse direction:

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="is-flex-direction-column-reverse">
            <div class="p-2 bd-highlight 
                        has-background-grey-lighter">
              Flex item 1
            </div>
            <div class="p-2 bd-highlight 
                        has-background-danger">
              Flex item 2
            </div>
            <div class="p-2 bd-highlight 
                        has-background-warning">
              Flex item 3
            </div>
        </div>
    </div>
</body>
</html>

Output:

Reference: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-direction

Explore