Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Flexbox Basics and Terminology

2:20 with Guil Hernandez

Before you begin using flexbox in your layouts, you should understand the terminology and concepts behind flexbox.

Resources

Video review

  • The two most important elements in flexbox layout are flex containers and flex items.
  • The flex container sets the context for flexbox layout; it contains flex items, the actual elements you layout using flexbox.
  • Every direct child of a flex container is called a flex item; there can be any number of flex items inside a flex container.
  • Once the children are flex items, you can take advantage of flexbox's powerful alignment properties.
  • Flexbox follows two axes that determine the layout direction of flex items: main axis and cross axis.
  • The main axis is the primary axis along which flex items are laid out; it defines the direction of flex items in the flex container.
  • The cross axis runs perpendicular to the main axis.
  • Each axis has a start side and an end side.
  • The default main-start and main-end direction of the main axis is left-to-right.
  • The the default direction of the cross axis is top-to-bottom.

Before you begin using Flexbox in your layouts, 0:00
you should understand the terminology and concepts behind Flexbox. 0:02
And I'm gonna be using a lot of the terminology and 0:06
concepts covered in this video throughout the course. 0:09
The two most important elements in Flexbox layout are Flex containers and Flex items. 0:12
The first step to using Flexbox in your layout is creating a Flex Container. 0:17
The Flex container sets the context for Flexbox layout, 0:22
and it contains Flex items, the actual elements you layout using Flexbox. 0:25
A Flex container can be any block-level or 0:30
inline element, like a div, ul, header, even a span element. 0:33
Every direct child of a Flex container is called a Flex item. 0:37
And there can be any number of Flex items inside a Flex container. 0:42
For example, say you had an unordered list. 0:46
The ul is a Flex container and the li elements are the Flex items. 0:49
Once the children are Flex items, 0:54
you can take advantage of Flexbox's powerful alignment properties. 0:56
The lis can be laid out in any direction and can have flexible dimensions 0:59
that adapt to the available space inside the ul. 1:03
In addition to the Flex container and 1:07
Flex items, to fully understand how Flexbox works, 1:09
you need to know about the axis along which a browser can place Flex items. 1:12
Flexbox follows two axis that determine the layout direction of Flex items. 1:18
Items in a container are laid out following either the main axis or 1:22
the cross axis. 1:25
So everything in a Flexbox layout is relative to these two axis. 1:26
The main axis is the primary axis along which Flex items are laid out. 1:30
It defines the direction of the Flex items in the Flex container. 1:35
And the cross axis runs perpendicular to the main axis. 1:39
Each axis has a start side and an end side. 1:43
The default main start and main end direction of the main axis is 1:46
left to right and the default direction of the cross access is top to bottom. 1:51
But you can easily change the directions. 1:55
For example, you can switch a horizontal 1:58
column layout along the main access to a vertical layout using Flexbox properties. 2:00
This will start to make more sense in the next section of this course when we 2:05
dive into the properties that make Flexbox work. 2:09
Also be sure to check out this awesome guide to Flexbox on CSS tricks, along with 2:12
other helpful resources I've posted in the teacher's notes of this video. 2:17

You need to sign up for Treehouse in order to download course files.

Sign up