The Flexible Box Layout Module usually referred to as flexbox, is a one-dimensional model. It consists of a lot of properties including strong alignment and space distribution among items. There are some properties for flex containers and some for flex items. Here, the flex container is a parent and the flex item is a child.
In flexbox, you need to understand that there are two axes. First is the main-axis - it is defined by the flex-direction
property. Second is the cross-axis - it is perpendicular to the flex-direction
property.
Let's see flexbox properties,
Properties on Flex Container
Display
It is used to set the display behavior of the element. It has multiple values and based on the given value it renders that type of box. Value can be block, inline-block, flex, grid, or none. To enable the flexbox module, we need to set the display value as flex. When flex property gets applied to the container, It enables a flex context for all its direct children.
.container {
display: flex; /* or inline-flex */
}
Flex Direction
flex-direction
defines the main axes of the container. It has four direction values.
- row: It is the default direction - left to right.
- row-reverse: It places items right to left horizontally.
- column: It places items vertically and top to bottom manner.
- column-reverse: It places items in the bottom to top manner vertically.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Flex Wrap
Flex items try to stack in one line which causes overflow but we can wrap them in multiple lines using this property. It has three values,
- nowrap: It is a default value, indicating that all items will be in one line.
- wrap: flex items will wrap onto multiple lines, from top to bottom.
- wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Flex Flow
It is a shorthand property for flex-direction and flex-wrap. It together defines the flex container's main and cross axis. The default value is row nowrap.
.container {
flex-flow: column wrap | row-reverse wrap | column wrap-reverse | row wrap;
}
Justify Content
It defines the alignment of flex items along the main axis. It has the below values,
- flex-start (default): items are positioned from the start of the flex-direction.
- flex-end: items are positioned toward the end of the flex-direction.
- center: items are centered along the line.
- space-between: items are evenly distributed in the line; the first item is on the start line, and the last item is on the end line.
- space-around: items are evenly distributed in the line with equal space around them.
- space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
There are also two additional values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g. off the top) in such a way the content can’t be scrolled too (called “data loss”).
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
Align Items
It defines the alignment of flex items along the cross-axis, which means it aligns items vertically - perpendicular to the main axis. It has the below values,
- Stretch (default): stretch to fill the container (still respect min-width/max-width)
- flex-start / start / self-start: items are placed at the start of the cross-axis. The difference between these is subtle and is about respecting the flex-direction rules or the writing-mode rules.
- flex-end / end / self-end: items are placed at the end of the cross-axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
- center: items are centered in the cross-axis
- baseline: items are aligned such as their baselines align
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
Align Content
This aligns a flex container’s lines within when there is extra space in the cross-axis. This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-wrap is set to its default value, no-wrap) will not reflect align-content. It has the below values,
- normal (default): items are packed in their default position as if no value was set.
- flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while the start honors the writing-mode direction.
- flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while the end honors the writing-mode direction.
- center: items centered in the container
- space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
- space-around: items evenly distributed with equal space around each line
- space-evenly: items are evenly distributed with equal space around them
- stretch: lines stretch to take up the remaining space The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Gap, Row-Gap, Column-Gap
The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.
.container {
display: flex;
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
Properties on Flex Items
Order
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
.item {
order: 5; /* default is 0 */
}
Flex Grow
This defines the ability for a flex item to grow if necessary. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space as either one of the others (or it will try, at least). Negative numbers are invalid.
.item {
flex-grow: 2; /* default 0 */
}
Flex Shrink
This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid.
.item {
flex-shrink: 3; /* default 1 */
}
Flex Basis
This defines the default size of an element before the remaining space is distributed. The auto keyword means “check at items width or height property first”.
.item {
flex-basis: | auto; /* default auto */
}
Flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 - 1 - auto, but if you set it with a single number value, like flex: 5; that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Align Self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Tip: To practice flexbox please visit flexboxfroggy. It is a game that clears all flexbox related concepts and doubts.
Thank You
If you enjoyed this blog :)
Follow me on Linked In