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