Understanding CSS Flexbox

The Flexible Box Layout Module (Flexbox) makes it easier to design flexible responsive layout structures without using float or positioning. It allows you to align items and distribute space within a container automatically.

1. The Flex Container Properties

To start using Flexbox, you must define a parent container with display: flex;.

Property	Common Values	Effect
flex-direction	row, column, row-reverse	Sets the direction of the items.
justify-content	center, space-between, flex-end	Aligns items along the main axis (Horizontal).
align-items	center, stretch, baseline	Aligns items along the cross axis (Vertical).
flex-wrap	nowrap, wrap, wrap-reverse	Allows items to wrap to the next line.

/* Basic Flexbox Setup */ .container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 200px; background-color: #f0f0f0; }

2. Visual Examples

Example A: Centering Content (Justify-Content: Center)

Example B: Space Between Items

Left

Middle

Right

Example C: Column Layout

Stack 1

Stack 2

Stack 3

3. Flex Item Properties

You can also control individual items inside the flex container:

flex-grow: Defines the ability for a flex item to grow if necessary.
order: Controls the order in which items appear.
align-self: Allows the default alignment to be overridden for individual items.

Key Advantage: Flexbox is "Direction-Agnostic." Unlike regular layouts (which are block/vertically and inline/horizontally based), flexbox works perfectly for any UI design regardless of screen orientation.