This simple website shows two flex containers:
-
The first one has a row disposition for desktop mode and will change to row disposition when shown in a mobile device.
-
Each element of the first container will be also a flex container, but in this case it's class is
flex-nested-container
. These have a column disposition (no matter if it's being shown in desktop mode or in a mobile device). These flex containers contains 4 elements:- A
h3
title - A static image
- The button that will tocle the article
- The article itself that will be shown or hidden
- A
I also created three classes: flex-nested-container-small
, flex-nested-container-medium
and flex-nested-container-large
to play with different sizes, even when the resulting aesthetics is not very appealing.