The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model. Flexbox defines layout in one dimension at a time — either as a row or as a column. If you need two-dimensional grids, use CSS Grid Layout, which controls columns and rows together.

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes.

The Main Axis

The Main Axis is defined by flex-direction, which has four possible values:

• row
• row-reverse
• column
• column-reverse

Example: flex-direction: row

Example: flex-direction: column

Multi-line flex containers with flex-wrap

While flexbox is a one dimensional model, it is possible to cause flex items to wrap onto multiple lines. If the flex items are too wide to all display in one line, they will wrap onto another line. Each line will be treated as a new flex container. Any space distribution will happen across that line, without reference to the lines on either side.

Example: flex-wrap: wrap

flex-flow shorthand

The properties flex-direction and flex-wrap can be combined into flex-flow shorthand. The first value specified is flex-direction and the second value is flex-wrap.

Example: flex-flow: row wrap

The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

CSS Grid Responsive Example

The example displays 3 items if the page is wide enough, then dynamically changes the layout as the page becomes narrower.

CSS Grid Line Based Example

The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.