Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Flexbox Basics and Terminology2:20 with Guil Hernandez
Before you begin using flexbox in your layouts, you should understand the terminology and concepts behind flexbox.
- A Complete Guide to Flexbox
- A Visual Guide to CSS3 Flexbox Properties
- Flexbox Playground
- Flexbox - latest browser support
- 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,
you should understand the terminology and concepts behind Flexbox.
And I'm gonna be using a lot of the terminology and
concepts covered in this video throughout the course.
The two most important elements in Flexbox layout are Flex containers and Flex items.
The first step to using Flexbox in your layout is creating a Flex Container.
The Flex container sets the context for Flexbox layout,
and it contains Flex items, the actual elements you layout using Flexbox.
A Flex container can be any block-level or
inline element, like a div, ul, header, even a span element.
Every direct child of a Flex container is called a Flex item.
And there can be any number of Flex items inside a Flex container.
For example, say you had an unordered list.
The ul is a Flex container and the li elements are the Flex items.
Once the children are Flex items,
you can take advantage of Flexbox's powerful alignment properties.
The lis can be laid out in any direction and can have flexible dimensions
that adapt to the available space inside the ul.
In addition to the Flex container and
Flex items, to fully understand how Flexbox works,
you need to know about the axis along which a browser can place Flex items.
Flexbox follows two axis that determine the layout direction of Flex items.
Items in a container are laid out following either the main axis or
the cross axis.
So everything in a Flexbox layout is relative to these two axis.
The main axis is the primary axis along which Flex items are laid out.
It defines the direction of the Flex items in the Flex container.
And 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 and the default direction of the cross access is top to bottom.
But you can easily change the directions.
For example, you can switch a horizontal
column layout along the main access to a vertical layout using Flexbox properties.
This will start to make more sense in the next section of this course when we
dive into the properties that make Flexbox work.
Also be sure to check out this awesome guide to Flexbox on CSS tricks, along with
other helpful resources I've posted in the teachers notes of this video.
You need to sign up for Treehouse in order to download course files.Sign up