5 Minute Beginner’s Guide to CSS Flexbox

This mug needs flexbox.

Introduced in CSS3, flexbox is a method for defining how components of a page behave across different devices and screen sizes. Named for its flexible nature, flexbox offers several benefits over old layout methods, including dynamic rearranging, alignment, direction, and container fit. In an increasingly mobile world, flexbox allows a developer to gain full control over the behavior of page elements indeterminate of what device they are being accessed from.

Flexbox Navigation Menu — horizontal and vertical views.

There are three main components of flexbox:

  • flex container — flex items are contained inside a flex container
  • flex items — elements whose behavior is being controlled
  • direction of flow — controls the direction of flex items

To define and access a container as a flex container you can use display: flex;. If no additional rules are set, all direct children will be considered flex items and will be laid horizontally, from left to right. The width of flex items automatically adjusts to fit inside the container.

HTML:

<div class = flexcontainer><div class = flexitem1 style=background-color:lightblue;> test1 </div><div class = flexitem2 style=background-color:lightgreen;> test2 </div><div class = flexitem3 style=background-color:lightslategray;"> test3 </div></div>

CSS:

.flexcontainer {
display:flex;
}
A basic flex container with three flex items.

To put all flex items in one column, add flex-direction: column; to your CSS.

.flexcontainer {
display: flex;
flex-direction: column;
}
Flex items in column orientation.

To reverse the column order of flex items, add flex-direction: column-reverse; to your CSS.

.flexcontainer {
display: flex;
flex-direction: column-reverse;
}
Column order is now reversed.

To reverse the row order of flex items, add flex-direction: row-reverse; to your CSS.

.flexcontainer {
display: flex;
flex-direction: row-reverse;
}
Row order is now reversed.

If you want flex items aligned to the right:

.flexcontainer {
display: flex;
justify-content: flex-end;
}
Right-justified flexbox.

If you want flex items centered:

.flexcontainer {
display: flex;
justify-content: center;
}
Centered flexbox.

If you want flex items separated:

.flexcontainer {
display: flex;
justify-content: space-between;
}
Added spacing between each flexbox item.

To center flex items both horizontally and vertically:

.flexcontainer {
display: flex;
justify-content: center;
align-items: center;
}

Resized to fit into one column or one row when a flex container is not large enough, flex items are not able to wrap by default. By using flex-wrap: wrap;, any flex items causing overflow will be wrapped to the next line.

To allow wrapping:

.flexcontainer {
display: flex;
flex-wrap: wrap;
}
Third flexbox item wrapped to the next line.

To allow reverse wrapping (overflow item(s) are sent to the line above):

.flexcontainer {
display: flex;
flex-wrap: wrap-reverse;
}
Third flexbox item wrapped to the line above.

To control the positioning of flex items when there is wrapping (replace * with stretch, space-around, space-between, center, flex-end, or flex-start):

.flexcontainer {
display: flex;
flex-wrap: wrap;
align-content: *;
}

When there is leftover space within a flex container, flex-grow can be used to dictate how each item fits in the remaining space.

To grow a flex item (default size is 0):

.flexcontainer {
display: flex;
}
.flexitem1 {
flex-grow: 1;
border: 3px solid;
}
First flexbox item manipulated with flex-grow.

Only working when there is space remaining in a container, flex-grow equals the ratio of a container’s width/height of which an item should stretch to fit to use up all leftover container space, relative to the size of other children in the container. Similarly, flex-shrink only works when flex items are overflowing the flex container due to insufficient space.

To shrink a flex item (default size is 0):

.flexcontainer {
display: flex;
}
.flexitem1 {
flex-shrink: 1;
border: 3px solid;
}

To set the precise size of each flex item (default value is flex-basis: auto;):

.flexcontainer {
display: flex;
}
.flexitem1 {
flex-basis: 25%; /*percentage value*/
}
.flexitem2 {
flex-basis: 50px; /*absolute value*/
}
.flexitem3 {
flex-basis: 5px;
}
Sizes set for all three flexbox items.

To use flex-grow, flex-basis and flex-shrink at the same time:

.flexcontainer {
display: flex;
}
.flexitem1 {
flex: 2 1 100px;
}
.flexitem2 {
5 1 5%;
}
.flexitem3 {
flex: 1 5 5%;
}

Throughout the tutorial flex items were accessed directly via CSS, example:

.flexitem1 {
flex-shrink: 1;
}

However, you may want to name all flex items the same, create groups of items, etc. To make your code more usable, you can access flexbox items by their order number (place the order number of the item you want to alter in parenthesis):

.flexitem1:nth-child(1) {
flex-shrink: 1;
}

Simple to learn, flexbox is a quick way to make responsive page elements. Unlike older layout methods, such as vertically-based block or horizontally-based inline, flexbox was designed to be adaptable to both vertical and horizontal layouts. Automatically adjusting to whatever type of device it’s being accessed from, flexbox is vital to modern web development. Make your pages dynamic across mobile, tablet and PC with flexbox.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store