From the course: CSS Layouts: From Float to Flexbox and Grid

Getting started with Flexbox - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Getting started with Flexbox

“

- [Narrator] The Flexible Box Layout or Flexbox for short, provides many ways for aligning content, ordering items, and implementing flexible sizing. For a long time, floats were used to create page layouts. It allowed us to create more complex layouts than the tables, but there were other limitations such as creating equal column heights, which we saw in the previous float exercise. Flexbox made it easier to tackle these types of layout issues. Flexbox is a whole new layout module, so that means new terminology and a multitude of flex-based properties. It is also often referred to as one dimensional layout, since items are laid out on a single axis either as columns or rows. We'll get more into that means a little bit later. The flex container is the parent element and only the child elements of the flex container are flex items, not the descendant elements. You can, however, nest flex containers within another flex container. To use Flexbox, the flex container must be defined first. Earlier we used the display property to change the behavior of inline and block level elements, but display is also used to set the flex container with one of two values, flex or inline-flex. Here's an example of two containers containing five block elements in the normal flow. Elements are stacked and span the width of its container. When display flex is added to the parent element, it is now defined as the flex container and each child element is now a flex item. Flex items are displayed in a row and become the same size as their content, but the flex containers still spans the width of its container. If you set the display value to inline-flex the flex container will span the width of its content, the flex items and displays inline to other flex containers. So it doesn't change how the flex items are displayed, instead it makes the flex container display inline. Though the flex items resize themselves automatically to the size of their content, you can set specific sizes as well, which we'll talk about soon. When using legacy techniques such as float, each item is the same height as its content, which we just saw in our previous exercise. Just by adding the flex display value, the flex items are automatically arranged into flexible equal height items, however, there are more flex properties to further customize your layouts.

Contents