Back Home

CSS Flexbox Fundamentals

Welcome to a practical guide on CSS Flexbox, a powerful layout module for arranging items in rows or columns. It provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.

What is Flexbox?

Flexbox is designed for one-dimensional layouts. It excels at distributing space along an axis and providing powerful alignment capabilities. The fundamental concept involves a flex container and flex items. The container is the parent element, and the items are its direct children.

Key Properties for the Flex Container:

display: flex;: This is the gateway. Applied to a parent element, it makes it a flex container.
flex-direction: Defines the main axis. Common values are row (default), row-reverse, column, and column-reverse.
justify-content: Aligns flex items along the main axis. Options include flex-start, flex-end, center, space-between, and space-around.
align-items: Aligns flex items along the cross axis. Options include flex-start, flex-end, center, baseline, and stretch (default).

Key Properties for Flex Items:

flex-grow: Specifies how much an item should grow relative to other items.
flex-shrink: Specifies how much an item should shrink relative to other items.
flex-basis: Defines the default size of an element before the remaining space is distributed.
flex: A shorthand for flex-grow, flex-shrink, and flex-basis.
align-self: Overrides the container's align-items property for a single item.

A Simple Flexbox Example

Observe how the items are arranged and aligned within the flex container:

Item 1

Item 2

Item 3

In the example above, the .example-box acts as the flex container, with display: flex;, justify-content: space-around;, and align-items: center; applied. This positions the items with space around them and centers them vertically.

Common Use Cases:

Centering an element both horizontally and vertically.
Creating navigation bars.
Building responsive layouts for cards or galleries.
Arranging form elements.

Explore More

Understanding these basic principles is the first step to mastering flexible layouts. Continue experimenting with different property values to see how they affect the arrangement of your flex items.

Discover Vintage Button Designs