Flexbox for responsive components, without media queries

.container {
  display: flex;
  flex-wrap: wrap;
}

/* Fluid width on same row, full width on own row. */
.fluid-width {
  flex-grow: 99999; /* a big number */
  flex-shrink: 1; /* not zero */
  flex-basis: 400px; /* min-width */
}

/* Fixed width on same row, full width on own row. */
.fixed-width {
  flex-grow: 1; /* a small number but not zero */
  flex-shrink: 1; /* not zero */
  flex-basis: 300px; /* min-width */
}

Using flexbox to make responsive widgets without media queries.

With one fixed width column (unless its on its own row) [in dark blue].

Allows for widget layout where parts of the widget have minimum widths and when…:

1. …we don't know the placement of the widget on a page: whether the widget would be in a main column or a side column
2. …we don't know the width of the viewport, ever.
3. …we don't know which pre-existing media queries exist

Various width containers

Example use case Flexbox responsive sign up widget. No media queries

Pros

• No media queries
• Items can be set to wrap when they reach their minimum width.

Cons

• Predicting exactly when [viewport width] something will wrap is tricky (math!). E.g. when something wraps, you also want a different text size (this is a P.I.T.A. to achieve without media queries to orchestrate changes to properties other than width).

Change your browser window width to get a feel for how this is responsive.

Nesting the HTML