CSS Flexbox

Flexbox First Steps

To make elements display using flexbox, you have to apply some styles to the container itself. First, tell the container to display: flex; and you should see a difference in your page right away. Remember, that the containers/parents are the elements holding the content items you want to style. On this page, we have a section for each topic, so each section is the parent of its content. The header is the parent of the h1 and nav, etc.

Additional Container Styles

By default, the flex container will display its elements in a row, with each taking up part of that container's width. The flex-direction property allows you to tell the elements to display in a column instead of a row. The flex-wrap property will allow your content to take up multiple rows or columns, instead of just one.

Styles for Flex Items

The elements inside of a parent container displaying flex can also have styles added to control their size and arrangement, as well as how they can grow as the screen width changes. The order property allows you to control the order in which elements are displayed. The flex-grow property can be set to allow certain items to be larger if there is space. flex-shrink does the opposite of flex-grow. The flex-basis property allows you to define the size of an element before the other elements fill up the remaining space. align-self allows you to control alignment on a specific item so that it can differ from the others in the same container.

Container Styles for Arranging Children

The way your content displays in the containers may not line up in the way you want, and there are some properties you can add to the parent container to help with that. The justify-content property controls alignment along the main axis. The align-items property controls alignment along the cross-axis. You can create space between your elements using the gap property.

Unique Flexbox Powers

One of the things that flexbox can do is easily center-align a container both horizontally AND vertically in a container. Imagine a popup or modal window on a website. You'd likely want that to be perfectly centered in the screen no matter what size that screen is. Flexbox can do that!

Additional Information

While flexbox can be used on its own for layout, usually you'll find this combined with CSS grid to control page layout and alignment of items inside of containers in a grid layout. Don't forget that you can test out the different flexbox properties with the dev tools as well! That can make it easy to see how the different settings will change your layout.