What is Flex Box ?
Flexbox can be thought of as a one-dimensional layout model that is very helpful in building responsive web pages and organizing page elements more easily. It is been extensively used in creating row-based and column-based axis layouts. By default, it takes a row layout.
The Flex Model
The flexbox is not a single property. It contains different things in addition to its entire set of properties. Some of them are placed in the container means the parent element. The parent element is called a 'Flex container'. While others are placed on the children. The children element is called 'Flex items'. In flex property, the elements are laid out along two axes.
Main-axis
The primary axis along which the flexible components are arranged. Depending on the flex-direction property, this can be either vertical or horizontal.
main-start edge and main-end edge
Flex items are arranged in the flex container from the main-start edge toward the main-end edge.
Flex line
Flex items are aligned along a flex line inside the flex container. By default, in a flex container, there’s only one flex line.
Cross axis
Axis perpendicular to the main axis.
cross-start edge and cross-end edge
In the container, flex lines start at the cross-start edge and end at the cross-end edge.
Flex Container Properties
Flex container properties define how browsers should lay out the items within the flexible box. There’re six flex container properties. Let’s walk through them:
flex-direction :
Specifies the direction in which the flex items should be positioned inside the flexible container. Flexbox is a single-direction layout concept. Therefore, the flex items can only be stacked in vertical columns or horizontal rows. The flex-direction property accepts four values:
row (default): Stacks the flexible items horizontally, from left to right.column: Stacks the flexible items vertically, from top to bottom.row-reverse: Stacks flex items horizontally, from right to left.column-reverse: Stacks flex items vertically, from bottom to top.
flex-wrap :
Flex items will attempt to fit into a single line by default. Thus, the excess items will overflow the container if all the flex items’ combined height (or width) is greater than the flexbox’s height (or width). flex-wrap indicates whether the overflowing flex items should be wrapped across multiple lines or not. The flex-wrap property accepts the following three values:
nowrap (default): Forbids wrapping the flex items and forces all the items to be on a single line. This may cause an overflow of flex items out of the container.wrap: Wraps the flex items into multiple lines, if necessary.wrap-reverse: Functions similarly to wrap but in reverse order.
justify-content :
Used to specify how the browser should align the flex items along the main axis of the flexbox. It defines how the space between and around the flexible items is distributed along the container’s main axis. The following values are accepted for this property:
flex-start (default): Aligns the flex items to the beginning (main-start edge) of the flexbox’s main axis.
flex-end: Aligns the flex items to the end (main-end edge) of the flexbox’s main axis.
center: Flexible items are centered along the flexbox’s main axis.
space-around: Flex items are evenly distributed along the main axis by allocating equal space to both sides of an item. Here, the space between the container’s main-start (or main-end) edge and the first (or last) flex item is half the width of the area compared to the distance between the two items.
space-between: Aligns the first item to the main-start edge and the last item to the main-end edge of the main axis and creates even spacing between each adjacent flexible item.
space-evenly: Within the container, flex items are distributed uniformly along the main axis. The space between each pair of subsequent items is equivalent to the distance between the first (or last) flex item and the container’s main-start (or main-end) edge.
align-items :
Used to specify how the browser should position the flex items along the cross-axis of the flexbox. Its behavior is similar to justify-content but perpendicular to the main axis. The following values are accepted for this property:
stretch (default): Stretches the flex items to fill the container’s vertical space while respecting the height and width constraints.center: Aligns the flex items to the middle of the container, or in other words, to the center of the container’s cross-axis.flex-start: Aligns the flex items at the cross-start edge. This means flexible items are aligned vertically at the top of the container.flex-end: Aligns the flex items at the cross-end edge. This means flexible items are vertically aligned at the bottom of the container.baseline: Aligns the flex items at the baseline of the cross-axis.
align-content :
Its behavior is similar to how the justify-content aligns flex items along the main axis when there’s extra space available in the main axis. But instead of the items, align-content aligns the flex lines and tells the browser how to position the flex container’s lines along the cross-axis. The following values are accepted for this property:
stretch (default): Fills up the vertical space by equally distributing the remaining space amongst the flex lines.space-between: The first and last flex lines are aligned to the cross-start and the cross-end edges of the container, respectively, while creating equal spacing between each pair of lines between the first and last lines.space-evenly: Flex items are equally distributed by assigning even space above the first line, between two flex lines, and below the last line.space-around: Similar to space-evenly, but here it adds equal spacing around each line. Therefore, the space before (or after) the first (or last) line is half the width of the distance between two adjacent lines.flex-start: Each flex line will only fill the space it needs and move toward the cross-start edge of the container.flex-end: Each line will only fill the space it needs and move toward the container’s cross-end edge.center: Similar to flex-start and flex-end, but the flex lines are aligned to the center of the container’s cross-axis.
Flex Item Properties
Flex item properties define how browsers should lay out a specific item within the flexible box. There are six types of flex container properties. Let’s walk through them:
order :
By default, flex items are positioned based on the order defined in the HTML code. The order property specifies the order in which the flex items should appear in the flex container. The value must be a number, and by default, it is 0.
flex-basis :
Defines the initial length of a flex item.
flex-grow :
Defines how much a flex item should grow relative to the other flex items inside the same container to fill up the excess space of the container. The value should be unitless, and the default is 0. If the flex-grow property is set to an equal value for all flex items, the remaining space of the flexbox will be distributed evenly among all items.
flex-shrink :
Defines how much a flex item should shrink relative to the other flex items when there’s not enough space in the container. The default value is 1.
flex :
The shorthand property to set the flex-grow, flex-shrink, and flex-basis values at once. The default is flex: 0 1 auto.
align-self :
This works similarly to the align-items property. However, the align-self doesn’t impact every flexible item in the container but only a selected item. Furthermore, it overrides the align-items property and defines the alignment of a selected item inside the flexbox.
