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:
justify-content
align-items
flex-grow
flex-shrink
flex-basis
flex
flex-wrap
align-content
flex-direction
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.