Chapter 15. CSS: Layout – Flex Box

In this chapter, we will explore the Flexbox layout model in CSS, a powerful tool for designing responsive web layouts. Flexbox provides an efficient way to align and distribute space among elements in a container, even when their size is unknown or dynamic. This chapter will cover various Flexbox properties, including container properties like display: flex, and item properties like flex-grow, flex-shrink, and flex-basis.

What We Cover in This Chapter

The following topics are covered in this chapter:

Flexbox Layout – display: flex

In this section, we'll explore the basics of the Flexbox layout. The Flexbox model is activated by setting the container's display property to flex. This allows for flexible alignment and distribution of items within the container. By default, Flexbox arranges items in a row, but we can adjust this with properties like flex-direction to control the layout direction.

flex-direction

In this section, we'll cover the flex-direction property, which defines the direction in which the flex items are laid out. It accepts four values:

• row (default) – Items are arranged horizontally from left to right.
• row-reverse – Items are arranged horizontally but in reverse order (right to left).
• column – Items are laid out vertically from top to bottom.
• column-reverse – Items are laid out vertically in reverse order (bottom to top).

Main Axis and Cross Axis

In this section, we'll explain the concept of the main axis and the cross axis. In Flexbox, the main axis is determined by the flex-direction property and can either be horizontal or vertical. The cross axis, on the other hand, is perpendicular to the main axis. Understanding these axes is essential for aligning items with properties like justify-content and align-items.

flex-wrap

The flex-wrap property controls whether flex items should wrap onto multiple lines if necessary. We'll cover its three possible values:

• nowrap (default) – Items stay on a single line, even if they overflow.
• wrap – Items will wrap onto multiple lines when necessary.
• wrap-reverse – Items will wrap onto multiple lines in reverse order.

justify-content

In this section, we'll explore the justify-content property, which aligns items along the main axis. It provides several values:

• flex-start – Aligns items to the start of the container.
• flex-end – Aligns items to the end of the container.
• center – Centers the items along the main axis.
• space-between – Distributes items evenly, with the first item at the start and the last item at the end.
• space-around – Distributes items with equal space around each one.
• space-evenly – Distributes items evenly with equal spacing between them.

align-items

In this section, we'll dive into the align-items property, which aligns items along the cross axis. The possible values are:

• flex-start – Aligns items to the start of the container.
• flex-end – Aligns items to the end of the container.
• center – Centers the items along the cross axis.
• baseline – Aligns items along their baseline.
• stretch (default) – Stretches items to fill the container.

align-content

The align-content property controls the spacing between rows when items wrap. It’s only relevant when wrapping occurs and accepts values like flex-start, flex-end, center, space-between, space-around, and stretch.

align-self

In this section, we'll explore the align-self property, which allows individual flex items to override the container's align-items value. This is useful when you want to align a specific item differently from others, using the same values as align-items.

flex-grow

In this section, we’ll cover the flex-grow property, which defines how much a flex item should grow relative to other items in the container. When multiple items have the same flex-grow value, they share space equally. If one item has a higher value, it will take up more space.

flex-shrink

The flex-shrink property determines how a flex item should shrink if there’s not enough space in the container. A value of 1 allows an item to shrink, while 0 prevents it from shrinking.

flex-basis

The flex-basis property sets the initial size of a flex item before any remaining space is distributed. It can be set to auto, which uses the item's content size, or to a specific length, such as px or %.

margin: auto with Flexbox

In this section, we’ll explore how using margin: auto on flex items can center them along both the main and cross axes, making it a simple way to center items within a container.

Inline Flexbox

The display: inline-flex property works similarly to display: flex, but the flex container itself behaves like an inline element. This means it only takes up as much width as its content, which is useful when you want to align the flex container inline with other elements.

Nested Flexbox

In this section, we'll cover how Flexbox allows for nesting of flex containers inside one another. This enables more complex layouts while still maintaining control over alignment and distribution of the elements.

Learn offline for better focus!
A book for this course is available on Amazon.

HTML & CSS Visual Guide

Step By Step Manual for Complete Beginners with Zero Coding Experience to Build Stunning Websites from Scratch

Get the Book Now