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

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    And I'm gonna be using a lot of the terminology and 0:00
    concepts covered in this video throughout the course. 0:00
    The two most important elements in Flexbox layout are Flex containers and Flex items. 0:03
    The first step to using Flexbox in your layout is creating a Flex Container. 0:08
    The Flex container sets the context for Flexbox layout, 0:13
    and it contains Flex items, the actual elements you layout using Flexbox. 0:16
    A Flex container can be any block-level or 0:21
    inline element, like a div, ul, header, even a span element. 0:24
    Every direct child of a Flex container is called a Flex item. 0:28

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up