Introduction To Flex Container Properties

Understanding Flexbox: A One-Dimensional Layout Tool

CSS Flexbox, formally known as the Flexible Box Module, is one of the primary modern layout systems in web design, alongside CSS Grid. While CSS Flexbox excels in one-dimensional layouts, CSS Grid is better suited for two-dimensional layouts.

Understanding Flexbox: A One-Dimensional Layout Tool Flexbox is designed to manage layouts in a single dimension, either in rows or columns, but not simultaneously. This means you can align items horizontally (in a row) or vertically (in a column), focusing on one direction at a time.

Flexbox is a reliable choice unless you need to support older browsers like IE8 and IE9, which do not fully support it. Using Flexbox allows you to move away from traditional methods such as table layouts and floats.

Using Flex

To opt into using flex layout we first need to apply flex to the display property to the parent container. Use the interactive example bellow to visually see how the display layout property changes the layout of the items.

display: flex;
1
2
3
4
5
6

Core Concepts of Flexbox

At the heart of Flexbox are two main concepts: the Flex Container and Flex Items. The container defines the space, and the items fill that space. These rules are:

  • flex-direction
  • justify-content
  • align-items
  • align-content
  • flex-wrap
  • flex-flow

Aligning Items With Flex Direction

The flex-direction property defines the direction in which items are aligned within the container. It has four values:

  • flex-direction: row: align items as a row, left to right
  • flex-direction: row-reverse places items just like row right to left
  • flex-direction: column places items in a column, ordering top to bottom
  • flex-direction: column-reverse places items in a column, just like column but in the opposite direction

Use the following interactive example to show how flex works. (insert interactive ui that changes a ui based on a radio pressed for direction)

1
2
3
4
5
6

Flex Wrap

flex-wrap controls whether items within a container remain on a single line or wrap onto multiple lines. The options are:

  • flex-wrap: nowrap the flex items will not break into multiple lines
  • flex-wrap: wrap The flex items break into multiple lines
  • flex-wrap: wrap-reverse
1
2
3
4
5
6

Justify Content

The justify-content property is used to align items along the main axis and manage spacing between them, with five possible values:

  • flex-start: align to the left side of the container.
  • flex-end: align to the right side of the container.
  • center: align at the center of the container.
  • space-between: display with equal spacing between them.
  • space-around: display with equal spacing around them
1
2
3
4
5
6

Flex Flow

flex-flow is a shorthand property combining flex-direction and flex-wrap. It helps define the main and cross axes of the flex container. The default setting is row nowrap.