Layout with Flexbox

Learn CSS Flexbox to create flexible page layouts.

Start

Key Concepts

Review core concepts you need to learn to master this subject

CSS Flexbox

justify-content Property

flex Property

flex-direction Property

align-content Property

flex-grow Property

flex-shrink Property

Css flex-basis property

CSS Flexbox

div {
  display: flex;
}

The CSS display: flex property sets an HTML element as a block level flex container which takes the full width of its parent container. Any child elements that reside within the flex container are called flex items.

Flex items change their size and location in response to the size and position of their parent container.

Flexbox

Lesson 1 of 1

1
What is Flexbox?
CSS provides many tools and properties that you can use to position elements on a webpage. Codecademy’s lessons on the box model and CSS display introduce a couple of these techniques. In this le…
Start
2
display: flex
Any element can be a flex container. Flex containers are helpful tools for creating websites that respond to changes in screen sizes. Child elements of flex containers will change size and location…
Start
3
inline-flex
In the previous exercise, you might have observed that when we gave a div — a block level element — the display value of flex that it remained a block level element. What if we want m…
Start
4
justify-content
In previous exercises, when we changed the display value of parent containers to flex or inline-flex, all of the child elements (flex items) moved toward the upper left corner of the parent contain…
Start
5
align-items
In the previous exercise, you learned how to justify the content of a flex container from left to right across the page. It is also possible to align flex items vertically within the container. T…
Start
6
flex-grow
In Exercise 3, we learned that all flex items shrink proportionally when the flex container is too small. However, if the parent container is larger than necessary then the flex items will not str…
Start
7
flex-shrink
Just as the flex-grow property proportionally stretches flex items, the flex-shrink property can be used to specify which elements will shrink and in what proportions. You may have noticed in ear…
Start
8
flex-basis
In the previous two exercises, the dimensions of the divs were determined by heights and widths set with CSS. Another way of specifying the width of a flex item is with the flex-basis property. fle…
Start
9
flex
The flex property provides a convenient way for specifying how elements stretch and shrink, while simplifying the CSS required. The flex property allows you to declare flex-grow, flex-shrink, and f…
Start
10
flex-wrap
Sometimes, we don’t want our content to shrink to fit its container. Instead, we might want flex items to move to the next line when necessary. This can be declared with the flex-wrap property. Th…
Start
11
Align-content
Now that elements can wrap to the next line, we might have multiple rows of flex items within the same container. In a previous exercise, we used the align-items property to space flex items from t…
Start
12
flex-direction
Up to this point, we’ve only covered flex items that stretch and shrink horizontally and wrap vertically. As previously stated, flex containers have two axes: a main axis and a cross axis. By d…
Start
13
flex-flow
Like the flex property, the flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line. .container { display: flex; flex-wrap: wrap; flex-direction: …
Start
14
Nested Flexboxes
So far, we’ve had multiple flex containers on the same page to explore flex item positioning. It is also possible to position flex containers inside of one another. …
Start
15
Review: Flexbox
You should be proud of yourself! You have learned the most important properties of flexbox. Flexbox is an art and a science; you can use it to make laying out multiple elements a piece of cake. You…
Start