Understanding Flexbox in CSS
Flex is used to create whole modules or blocks that can contain responsive elements in it. Many grid systems(Bootstrap, foundation) whose SASS/SCSS I observed carefully follows the conventions of flex. Positioning components and objects in vertical or horizontal stacks is possible with flex. A flex’s alignment is identified along the main axis and cross axis. Main axis is generally horizontal, but it can be made vertical by using flex-direction property. Flex is responsive and flexible by itself, and it aligns the flex items in the right position with respect to the other flex items in the flex. The grids below are flex items wrapped inside their flex-box or flex-container.
Flex is defined within the display property. IE-10 and IE-11 offers partial support to flex when prefixed with -ms-. Android 4.3 provides partial support with -webkit- prefix. Edge, Safari, Chrome, Firefox, Opera and Android browsers above 4.3 provides full support to the updates of flex.
Since flex is a block or whole space aligning/altering property, it is supported by many sub-properties which can work on the parent flex and the child flex-items.
Sub-properties that a flex-box can have
Sub-properties that can alter the flex-items in the flex-box.
Lets make sure we get to understand the sub-properties clearly one after the other.
Sub-properties of flex-box
This is used to specify the direction in which the main axis should fall. By default, the default direction is row.
On changing the value in flex-direction property, we can change the direction of the flex-box axis in the window. For instance, the snippet below inverses the direction of flex-items in the flex-box.
We make use of flex-wrap which is as same as the wrapping options in any text editor to wrap the contents of the flex-box in the next line. The flex-box auto adjusts the spacing and renders the flex-items in the next line. By default, we have the nowrap active, which doesn’t wrap the flex-items of the flex-box.
The following is the flex-box with the flex-items that are already illustrated above. We have made use of nowrap here, and all the flex-items are arranged within the same flex-box.
Flex-flow is a combination of flex-direction and flex-wrap.
Other than specification of the two distinct values to style the flex-box, we can make use of initial and inherit where initial sets the default value while inherit inherits from the parent flex-box.
This is used to align the flex-box contents along the main axis. This has five property values: flex-start, flex-end, center, space-around andspace-between.
- flex-start: Pushes flex-items to the starting of where the flex-box starts.
- flex-end: Aligns flex-items to the end where the flex-box ends.
- center: Adjusts the space to align the flex-items to the exact center of the flex-box.
- space-around: Adjusts space around the flex-items in the flex-box.
- space-between: Adjusts space between the flex-items in the flex-box.
Align-items is used to align the flex-items along the vertical or cross axis. This has five property values: flex-start, flex-end, center, **baseline **and stretch.
- flex-start: Pushes flex-items to the starting of where the flex-box starts in the cross-axis.
- flex-end: Aligns flex-items to the end where the flex-box ends in the cross axis.
- center: Adjusts the space to align the flex-items to the exact center of the flex-box in the cross axis.
- baseline: Aligns the flex-items along the baseline of the flexbox.
- stretch: Stretches the flex-items along the cross axis.
Align content/lines are used to align the flex-items contents along the vertical or cross axis. This has six property values: flex-start, flex-end, center, space-around, space-between and stretch.
- flex-start: Pushes flex-containers content/lines to the starting of where the flex-box starts in the cross-axis.
- flex-end: Aligns flex-container lines/content to the end where the flex-box ends in the cross axis.
- center: Adjusts the space to align the flex-container content to the exact center of the flex-box in the cross axis.
- space-between: Makes space between the content/lines in the flex-container in the flex-box
- space-around: Makes space around the content/lines in the flex-container in the flex-box
- stretch: Stretches the flex-container content along the cross axis.
Sub-properties of flex-items
The flex-grow property specifies how much the item will have to expand itself relative to the rest of the flexible items inside the same flex box.
“Order” sub-property of the flex items manipulates the order in which the flex items are arranged. The items that are not ordered are aligned at the beginning assuming they should be listed first.
The flex-shrink property specifies how much the item will have to shrink itself relative to the rest of the flexible items inside the same flex box. It is opposite to the flex-grow property.
Sets the base width/length of the flex items in the flex box.
Flex, the sub-property of the flex items, is shorthand combining flex-basis, flex-grow and flex-shrink. This property determines the length of the flex items but doesn’t really give any regard for its contents.
Align-self is to specify alignment property for one particular flex-item where ever it is called in a flex-box.
The images that I’ve used in the article are screenshots of the actual flexbox and flex items. To understand the responsiveness of the flex, follow the flex box tutorial.