Flexbox aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
1. Declaring a Flexbox
A flexbox is declared to the flex container (or) a parent element, using the display
property. By default, flex arranges the child items (or) flex items row-wise. But this can be changed suing the flex-direction
property. This establishes the main-axis, thus defining the direction flex items are placed in the flex container. flex-direction
can have 4 values,
row
(default): left to right inrow-reverse
: right to leftcolumn
: same asrow
but top to bottomcolumn-reverse
: same asrow-reverse
but bottom to top
Syntax
.container {
display: flex; /* or display: inline-flex */
flex-direction: row;
}
2. Flex wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Also flex-wrap
is applied on the parent element. flex-wrap
can have 3 properties,
nowrap
(default): all flex items will be on 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.
Syntax
.container {
flex-wrap: wrap;
}
3. Flex flow
This is a shorthand for the flex-direction
and flex-wrap
properties, which together define the flex container’s main and cross axes. The default value is row nowrap
. flex-flow
can have all combinations of flex-direction
and flex-wrap
.
Syntax
.container {
flex-flow: column wrap;
}
4. Justify content
justify-content
defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. justify-content
can have the below values,
flex-start
(default): items are packed toward the start of the flex-direction.flex-end
: items are packed toward the end of the flex-direction.start
: items are packed toward the start of thewriting-mode
direction.end
: items are packed toward the end of thewriting-mode
direction.left
: items are packed toward left edge of the container, unless that doesn’t make sense with theflex-direction
, then it behaves likestart
.right
: items are packed toward right edge of the container, unless that doesn’t make sense with theflex-direction
, then it behaves likestart
.center
: items are centered along the linespace-between
: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around
: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.space-evenly
: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
Syntax
.container {
justify-content: flex-start;
}
5. Align items
align-items
defines the default behavior for how flex items are laid out along the cross axis
on the current line. Think of it as the justify-content
version for the cross-axis (perpendicular to the main-axis). It can have 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 theflex-direction
rules or thewriting-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 respectingflex-direction
rules vs.writing-mode
rules.center
: items are centered in the cross-axisbaseline
: items are aligned such as their baselines align
Syntax
.container {
align-items: flex-start;
}
6. Align content
align-content
aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content
aligns individual items within the main-axis. It can have the following 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 theflex-direction
whilestart
honors thewriting-mode
direction.flex-end
/end
: items packed to the end of the container. The (more support)flex-end
honors theflex-direction
while end honors thewriting-mode
direction.center
: items centered in the containerspace-between
: items evenly distributed; the first line is at the start of the container while the last one is at the endspace-around
: items evenly distributed with equal space around each linespace-evenly
: items are evenly distributed with equal space around themstretch
: lines stretch to take up the remaining space
Syntax
.container {
align-content: flex-start;
}
7. Gap
The gap
property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.
Syntax
.container {
display: flex;
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}