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" > w3wiki </ 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" > w3wiki </ 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" > w3wiki </ 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" > w3wiki </ 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