Flexbox Form Examples

• Grids built with CSS Grid
• Flexbox 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

  

  

• 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

  

• Grids built with CSS Grid
• Flexbox Examples