Split-screen Layout with FlexBox

From a UX perspective:

A split-screen layout is a full-screen web component that is segmented into two or more equal vertical columns. This type of layout is mostly used in minimalist designs for landing pages when we want users to easily focus on two or more selectable options.

From a development perspective:

A split-screen layout can be seen as a two-block layout. Both blocks varying on size and arrangement depending on the screen size.

On smaller screens: Both blocks tend to fill the entire screen and be stacked one on top of the other, forcing the user to see only one block at the time and intentionally pose an action to see the second block (scrolling or clicking an action button)

On larger screens: Both blocks tend to be visible at the same time, being side by side and occupying half of the viewport real estate.

Using Flexbox CSS module:

A split-screen is easily created in Flexbox by first creating a parent flex-container width two children blocks (split-layouts). Then, by playing with the parent flex-direction property to arrange the split layouts in a column (small screens) or in a row (large screens). Optionally, the split-screens can also be set as flex-containers in order to center their content vertically and horizontally, thus controlling the content’s presentation.

The code:

I’ve created a great pen that clearly details the process, you can see the demo right away or look at the code and preview for reference. Any of you had the opportunity to work with a split-screen layout? I would love to hear about it.

Thank you and happy coding!