Flexbox

By far one of the most useful and flexible display modes is display: flex, part of the CSS Flexible Box Module (often referred to as “flexbox” or simply “flex”). This module “defines a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can ‘flex’ their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.”¹

When an element is given a display of flex, while still behaving as a block-level element itself, it becomes a flex container whose immediate children then become flex items. Each of these items may define their own acceptable ranges of width or height, as well as the rate at which they may grow or shrink along the main axis relative to each other when the container’s available space changes. They also may optionally break onto new lines if the container’s available space is too small for all of its children to fit onto one line.

Let’s explore some of the flexbox terminology regarding axes and alignment types, and the CSS properties used to control them. Below is a diagram and excerpt from MDN’s guide, Using CSS Flexible Boxes.²

Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

• The flex-direction property establishes the main axis.
• The justify-content property defines how flex items are laid out along the main axis on the current line.
• The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
• The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.

Furthermore, each flex item may itself be defined as a flex container so that its own children are then flexible items… and so on and so on, recursively. This is a powerful mechanism by which to build application interfaces that can stretch and respond to screens of varying size or orientation. It also provides us with the ability to approach design from a more modular mindset. In some cases, instead of thinking of the whole window, we can concentrate on a single “component” of our UI and its own unique needs and constraints in terms of size and layout, knowing that it and its children can handle “resizing themselves” in the context of the overall application layout when needed.

It is well worth taking time to explore all of the various properties provided by flexbox and the range of behavior that they allow. An excellent place to start is Chris Coyier’s visually engaging “Complete Guide to Flexbox” on CSS Tricks.

Grid

The CSS Grid Module “defines a two-dimensional grid-based layout system, optimized for user interface design.”³

Media Queries

Media Queries allow for certain style rules to apply only when the user’s device matches a given set of criteria. This can be immensely useful when tailoring styles which may need to appear differently on smaller or larger screens.

A media query can contain multiple expressions, each of which resolves to either true or false. These can be combined using the word ”and”, or separated by commas (which act like a logical or).

In a stylesheet, media queries define blocks (enclosed in curly braces) containing any number of normal rulesets, which will be applied to the document if the query evaluates to true. For example, a media query to match screens between 300px and 600px wide would be written as:

@media (min-width: 300px) and (max-width: 600px) {
  /* ... rulesets ... */
}

We can also apply a media query as an attribute on link elements in the head to conditionally apply entire external stylesheets:

<link rel="stylesheet" media="(max-width: 800px)" href="small-styles.css" />