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.

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

    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

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

      Sign up