CSS Flex Responsive
We will again use media queries for a responsive web design but this time we will utilize display flex. This time we will try to create a flex container with changing flex-direction depending on browser window size.
Example 1:
In this example we will create a simple navigation menu which changes its flex direction to columns when the browser window is less than or equal to 600px. Try to resize your browser window to see the effects.
Responsive Image Gallery Using Flexbox
Next we will build a simple responsive image gallery but this time we will use the display flex value. The goal is to have a 4-column layout then shrinks to 2-column layout when the screen is less than 992px and then ultimately to a 1-column layout for screens less than 600px.
Example 2:
We will be using random photos from Picsum and try to make an image gallery. Resize your browser window to see the effects.
Responsive Website Using Flexbox
For the last one, we will recreate a website from W3Schools and also make it responsive using flexbox design.
We will also utilize the iframe element to showcase the recreated website. Try to resize the iframe below by dragging the bottom corner.
Example 3:
