Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Before you begin using flexbox in your layouts, you should understand the terminology and concepts behind flexbox.
Resources
- A Complete Guide to Flexbox
- A Visual Guide to CSS3 Flexbox Properties
- Flexbox Playground
- Flexbox - latest browser support
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.
Related videos
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 teachers notes of this video. 2:17
You need to sign up for Treehouse in order to download course files.
Sign up