
FlexBox : An Ultimate Guide
In this tutorial, we will learn about Flexbox and its uses in modern web development.
What is Flexbox?
The Flexbox is a Modern way of laying out elements in a 1-dimensional row without using floats.
Flexbox is a set of related CSS properties for building 1-dimensional layouts.
The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements.
Flexbox makes it easy to automatically align items to one another inside a parent container, both horizontally and vertically
Flexbox solves common problems such as vertical centering and creating equal-height columns
Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner HTML and CSS code.
Flexbox properties
flex container Properties (Parent)
display
This defines a flex container.
.container {
display: flex;
}
flex-direction
To define which is the main axis
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Flex-direction accepts the following values:
- row: Items are placed the same as the text direction.
- row-reverse: Items are placed opposite the text direction.
- column: Items are placed from top to bottom.
- column-reverse: Items are placed from bottom to top.
Notice that when you set the direction to a reversed row or column, start and end are also reversed.
Notice that when the flex direction is a column, justify-content
changes to the vertical and align-items
to the horizontal.
flex-wrap
To allow items to wrap into a new line if they are too large
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
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
justify-content
To align items along main axis (horizontally, by default)
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
the justify-content property accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
align-items
To align items along the cross axis (vertically, by default)
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
align-item property accepts the following values:
- flex-start: Items align to the top of the container.
- flex-end: Items align to the bottom of the container.
- center: Items align at the vertical center of the container.
- baseline: Items display at the baseline of the container.
- stretch: Items are stretched to fit the container.
align-content
Only applies when there are multiple lines (flex-wrap: wrap)
.container {
align-content: flex-start | flex-end | center | space-between | space-around;
}
This property takes the following values:
- flex-start: Lines are packed at the top of the container.
- flex-end: Lines are packed at the bottom of the container.
- center: Lines are packed at the vertical center of the container.
- space-between: Lines display with equal spacing between them.
- space-around: Lines display with equal spacing around them.
- stretch: Lines are stretched to fit the container.
gap
To create space between items, without using margin
.container {
gap:10;
}
flex items(Children)
align-self
To overwrite align-items for individual flex items
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
This property accepts the same values as align-items and its value for the specific item.
flex-grow
To allow an element to grow (0 means no, 1+ means yes)
.item {
flex-grow: 4; /* default 0 */
}
flex-shrink
To allow an element to shrink (0 means no, 1+ means yes)
.item {
flex-shrink: 3; /* default 1 */
}
flex-basis
To define an item’s width, instead of the width property
.item {
flex-basis: | auto; /* default auto */
}
flex
Recommended shorthand for flex-grow, -shrink, -basis.
.item {
flex: 0 1 auto
}
order
Controls order of items. -1 makes item first, 1 makes it last
.item {
order: 5; /* default is 0 */
}