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=</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/
Please Login to comment...