Chapter 1: Introduction to Flexbox

Flexbox has become my go-to layout model, and for good reason. It simplifies the process of creating responsive designs while significantly reducing the amount of code I need to write. Prior to discovering Flexbox, I faced challenges in web design, but this tool has transformed my approach.

In this guide, I aim to break down Flexbox in the simplest terms possible. While it may seem complex at first, this tutorial will clarify its concepts. Let’s dive in!

Flexbox is a CSS layout model that allows you to easily manage multiple rows and columns, making it straightforward to create responsive layouts and perform various layout tasks. To start, you'll want to define a parent container that utilizes the display: flex property, allowing for the inclusion of multiple child elements with customizable characteristics.

To begin, you must establish a direction for your layout; if you don't, it defaults to a row orientation. For instance, you can set it as follows:

flex-direction: row;

Alternatively, you can opt for a column direction:

flex-direction: column;

For a visual example, I've included a screenshot from a webpage shared on Pinterest, which showcases a simple layout with one row containing three columns.

Now that we’ve covered the basics, let’s discuss two other essential properties: align-items and justify-content. When the flex-direction is set to a row, the main axis (x-axis) is influenced by justify-content, while the cross-axis (y-axis) is controlled by align-items.

If this sounds confusing, don’t worry! I’m here to help clarify. The justify-content property affects horizontal alignment, whereas align-items deals with vertical alignment.

Consider the case where flex-direction is set to columns; in this situation, the x-axis will correspond to align-items, and the y-axis to justify-content. Thus, the roles of these two properties are reversed depending on the direction.

If you're feeling a bit lost, let’s simplify it further. The align-items property can be adjusted as follows:

• align-items: flex-start aligns items at the top.
• align-items: center centers items vertically.
• align-items: flex-end aligns items at the bottom.

As indicated by the x and y-axis chart, items will align vertically when the flex-direction is set to rows. Similarly, you can modify the justify-content property for horizontal spacing:

• justify-content: space-between creates space between items.
• justify-content: space-around offers equal space on both sides of each item.
• justify-content: space-evenly distributes space evenly on both sides.
• justify-content: center centers the items within the container.

The flex-basis property defines the width of an item based on its content, but you can also specify a fixed width.

When applying the flex-grow property, an item scales in relation to the average size of other items in the same row. For example, if you set the values to 1, 2, and 7, they adjust to fill the entire width of the container proportionally.

The flex-shrink property describes how much an item should shrink compared to other flexible items in the container. In this scenario, the third item will shrink seven times more than the others.

The flex-wrap property determines whether items should wrap onto the next line once they exceed the width of the container. For instance, by using flex-wrap: wrap, items will move to the next line when necessary.

Lastly, the order property allows you to rearrange items. For example:

• Box 1: order 3
• Box 2: order 1
• Box 3: order 5
• Box 4: order 2
• Box 5: order 4

This will rearrange the boxes within the container accordingly.

I hope you find this guide helpful!

If you’re interested, you can access my Web Development Mastery course for just $5. For more insights, visit PlainEnglish.io. Don’t forget to subscribe to our free weekly newsletter, and follow us on Twitter and LinkedIn. Join our Community Discord and be a part of our Talent Collective.

Chapter 2: Practical Flexbox Examples

In this video, "Learn CSS Flexbox in 5 minutes | Unlock the Power of Layout Flexibility," you’ll discover how to harness the full potential of Flexbox for your web projects.

This video titled "Learn Flexbox in 15 Minutes" provides a deeper understanding of Flexbox and its practical applications in web design.