Responsive Forms with CSS Flexbox

Friday 20th, May, 2022 | # # #

Many developers are familiar with the tricks with CSS floats and clearfixes to create multi-column layouts. These tricks are still in use today, as they work and are widely supported across a myriad of browsers. However, in 2009, a new display style called flex appeared on the map.

Since then, flex has undergone several changes until reaching its current iteration. The flex value is an alternative for locking floating and manipulated elements using media-queries. Because of this, developers can create flexible containers, i.e. Flexbox for short. It's great for mobile screens and responsive content for web designs and apps that are dynamic.

Designing with flexible containers is a way to use the CSS display property in a whole new way. Block elements stack vertically, while inline elements stack horizontally (until they break on a new line).

FlexBox elements can stack vertically or horizontally based on your configuration. They can be evenly spaced on the page or squeezed and pressed against each other. The crux is to provide greater control to developers who want to create naturally responsive layouts.

Any element referenced as a Flexbox is a container element. This container will contain elements inside, known as FlexBox items. If you want more details on this, I recommend you read the first part of this Mozilla Dev article.

The display:flex container can have a fixed or fluid width, but it is best to leave it as fluid, so that the content adapts to the page. Internal elements will not have specific width values, instead they will be displayed based on proportions. You can use the CSS property called flex to define a radius between containers (mostly HTML divs). Flex:1 represents a 1:1 radius where each internal flex element is displayed with the same width based on the screen resolution.

Responsive Flexbox Example 1

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Responsive Flexbox Example 2

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

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Responsive Flexbox Form Examples

See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.

See the Pen Flexbox Inspiration - Form 2 by Andrea Roenning (@andreawetzel) on CodePen.

See the Pen flexbox form by Andrej (@pixiefrog) on CodePen.

See the Pen Flexbox Form by James Yeates (@jimibue) on CodePen.

See the Pen Responsive Flexbox Form with JS validation by Gabriel Smith (@thecountgs) on CodePen.

See the Pen Flexbox Form by Matthew R. Dangle (@matthewrdangle) on CodePen.

See the Pen flexbox responsive form layout by Kevin Thrasher (@kevinthr) on CodePen.

See the Pen flexbox responsive form by R (@rrastik13) on CodePen.