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

Creating a Flex Container

4:50 with Guil Hernandez

Now that you know the basic concepts and terminology, you're ready to learn the first step in creating a flexbox layout: defining the flex container.

Resources

Video review

  • Before you can use any flexbox property, you need to define a flex container in your layout.
  • You create a flex container by setting the display property of an element to one of the flexbox layout values: flex or inline-flex.
  • By default, flex items are laid out horizontally on the main axis from left to right.
  • By default, flex items stretch to fill the flex container's height.
  • display: flex; creates a block-level flex container.
  • display: inline-flex; creates an inline flex container.
  • Any element outside a flex container is not affected by the flexbox layout.
  • Only children of a flex container automatically become flex items.

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

    the first step in creating a flex box layout, defining the flex container. 0:00
    To follow along using Workspaces, launch the Workspace on this page. 0:00
    You can also download the files to follow along with your own text editor, 0:03
    if you prefer. 0:07
    In the Workspaces, in the index.html file you'll see a div with the class container. 0:08
    Nested inside the container div are six divs that share the class item. 0:15
    In the CSS folder you'll see the files flexbox.css and page.css. 0:23
    In page.css I've added some base styles for the page. 0:29

    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