Flexbox Form Examples

These flexbox form layouts can be used as is, or modified to suit.

Responsive Navbar with Adjacent Search

Uses flexbox to align the links to the left, and the search to the right. Expands and contracts with the viewport size. Collapses down for extra small viewports, such as mobile devices.
- View example
On wide screens

On narrow screens
Basic form 1

Uses flexbox to make the input controls extend all the way to the right edge, regardless of its start point.
- View example
Basic form 2

Same as the above form, except that on this one, each form control is the same width (both their right and left edges line up).
- View example
Stretchy textarea

The textarea stretches to fill up all available space. If more elements are added to the right part of the form, the height of the left textarea will increase accordingly.
- View example
Stretchy textarea 2

Same as previous, except with the message box on the right side of the form. This is achieved using the CSS order property (no HTML markup was changed).
- View example
More Form Elements

A slightly larger example that includes nested flex containers.
- View example