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 Flexible Box Layout or flexbox, a tool that greatly simplifies how to position elements.
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-contentalign-itemsflex-growflex-shrinkflex-basisflexflex-wrapalign-contentflex-directionflex-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 how the elements change position to fit in the width of the page.