Learn
Flexbox
What is Flexbox?

CSS provides many tools and properties that you can use to position elements on a webpage. Codecademy’s lessons on the box model and CSS display introduce a couple of these techniques.

In this lesson, you will learn about flexbox or Flexible Box Layout, a new tool developed for CSS3 that greatly simplifies how to position elements. While flexbox is not meant to lay out entire pages, it is useful for positioning elements, whether individually or in groups.

There are two important components to a flexbox layout: flex containers and flex items. A flex container is an element on a page that contains flex items. All direct child elements of a flex container are flex items. This distinction is important because some of the properties you will learn in this lesson apply to flex containers while others apply to flex items.

To designate an element as a flex container, set the element’s display property to flex or inline-flex. Once an item is a flex container, there are several properties we can use to specify how its children behave. In this lesson we will cover these properties:

  1. justify-content
  2. align-items
  3. flex-grow
  4. flex-shrink
  5. flex-basis
  6. flex
  7. flex-wrap
  8. align-content
  9. flex-direction
  10. flex-flow

Flexbox is an elegant tool that makes it easy to address positioning issues that may have been difficult before. Let’s get started!

Instructions

In the browser to the right, scroll down until you see the phrase “Our Expertise” in the div with the yellow background. Stretch and shrink the browser and observe what happens to the elements.

Folder Icon

Take this course for free

Already have an account?