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.
<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.
Example 2: In the below example, we will make use of the ‘is-flex-direction-row‘ to change the size of the element.
My Personal Notes arrow_drop_up
Please Login to comment...