Conclusion and Next Steps

In this course, you have learned the ins and outs of creating Flexbox layouts. Remember, the key to mastery is spaced repetition. You should let the basic concepts sink in, and then revisit the material from time to time.

Fundamentals

We use Flexbox in the context of styling mobile-responsive websites and web applications. Therefore, you will need to know the basic CSS display types, including block, inline, inline-block, and flex.

To create responsive layouts, you need to know how to create breakpoints and whether you design your layout in a mobile-first or mobile-last way.

If you ever struggled with these concepts, go back and revise the Getting Started part of the course.

Flexbox containers

When using display: flex;, we start with defining the container rules. A Flexbox consists of a container and internal Flex items. The container rules determine how all items align inside the container:

• flex-direction: defines whether the layout is left-to-right, right-to-left, top-to-bottom, or bottom-to-top. It sets the direction of the main axis and the cross axis.
• justify-content: defines how Flex items align along the main axis.
• align-items: defines how Flex items align along the cross axis.
• flex-wrap: allows a Flexbox container to display content in multiple rows or columns along the main axis.
• align-content: distributes empty space along the cross axis.

We also learned the flex-flow abbreviation to define flex-direction and flex-flow in one single rule.

Flex items

While styling Flexbox containers is paramount, Flex item styling is often characterized as the icing on the cake. We have learned the following rules:

• align-self: creates exceptions with respect to the container-level align-items settings for an individual Flex item.
• flex-grow: defines how fast or slowly a Flex item grows with respect to other Flex items when the viewport is resized.
• flex-shrink: defines how fast or slowly a Flex item shrinks with respect to other Flex items when the viewport is resized.
• flex-basis: sets the basis width or height of a Flex item to influence the basis of the growth or the way how the item shrinks.
• order: influences the order of Flex items.

We also learned the flex abbreviated rule that combines flex-grow, flex-shrink, and flex-basis.

Putting theory into practice

Knowing the basic rules is important, but employers and clients don’t tend to pay for knowledge. They reward you for solving their problems. Therefore, we have put theory into practice and built the layout of the landing page of a blog.

Next steps

Flexbox is the easiest tool to create a container containing one row or one column of Flex items. While it is possible to make individual Flex items also Flex containers, the flexibility of Flexbox is tested when your task is to create multiple rows and multiple columns. Therefore, after mastering Flexbox, the next logical step is learning the Grid system.

While Flexbox is an excellent choice because of its simplicity, Grid comes in handy in defining complex multi-row and multi-column layouts.