The Responsive Split Design Pattern in Flexbox

Introduction#

In this article, we will explore the concept of responsive split components by utilizing the properties of CSS Flexbox. When presented with lower screen sizes, some layouts may not retain their tidy appearance, hence the need for responsive design. One way to achieve a more responsive and appealing layout on smaller screens is by using the flex properties to set intrinsic rules for varying widths, ultimately moving to a stack layout when necessary. This approach improves the overall aesthetics of the layout on smaller screens.

Here's a demo of what we'll be building:

Understanding Flex Wrap and Calculating Largest Width#

The first step in creating a responsive split component is to define rules that govern the layout when both sides cannot maintain at least 50% width. In such cases, the layout should switch to a stack. This can be achieved using the flex-wrap property. Additionally, we need to calculate the maximum width, essentially 100% of the containing box, minus any guttersize of your choosing.

For example, consider the following CSS:

xxxxxxxxxx

[data-split] {

  --gutter: initial;

  display: flex;

  flex-wrap: wrap;

  gap: var(--gutter, 0);

}

[data-split] > * {

  flex-grow: 1;

}

[data-split] > *:nth-child(1) {

  flex-basis: 50%;

}

[data-split] > *:nth-child(2) {

  flex-basis: 0;

  min-width: 50%;

  flex-grow: 999;

}

In this context, the first child panel has a basis of 50% of the maximum width, while the second child panel has a basis of zero (thus not trying to claim any width by default). The second child will also take up any additional available space more dominantly than the first, thanks to the flex-grow: 999 property.