Flexbox

Flexbox is used to create responsive layouts. It is typically considered ideal for 1-dimensional rows or columns, though more complex layouts can be achieved by nesting flexboxes inside of each other.

From CSS Tricks' "CSS Flexbox Layout Guide":

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

Flexbox Container (image source: CSS Tricks)

Flexbox Items (image source: CSS Tricks)

The CSS Tricks article linked above is an excellent reference for all things flexbox. To get started, the following set of seven properties (demonstrated in the example below) can be used to accomplish most layout goals:

Container properties:

• display - Set this property value to flex to create a flexbox container.
• flex-direction - Options are row (the default) or column.
• flex-wrap - By default, flexbox tries to fit everything in one row. Set this property to wrap to allow flex items to wrap into multiple rows as needed (this only works if items have a fixed or minimum size).
• justify-content - Defines the alignment along the main axis.
• align-items - Defines the alignment along the cross axis.
• gap - Controls the space between flex items.

Item properties:

• flex - Determines how much space an item will occupy proportionally. For example, a flex item with flex: 2 will take up twice as much space as a flex item with flex: 1.

When testing responsiveness with embedded CodePen examples, you should open the Pen in its own window by clicking Edit On CodePen, then use your browser's Device Mode (Chromium-based) or Responsive Design Mode (Firefox).

See the Pen Flexbox (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.