Responsive Topnav Example
Resize the browser window to see how it works.
The flex-wrap Property
The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:
1
2
3
4
5
6
7
8
9
10
11
12
Responsive Flexbox
The "flex-direction: row;" stacks the flex items horizontally (from left to right).
The "flex-direction: column;" stacks the flex items vertically (from top to bottom).
Resize the browser window to see that the direction changes when the screen size is 800px wide or smaller.
1
2
Responsive Column Cards
Resize the browser window to see the effect.
Card 1
Some text
Some text
Card 2
Some text
Some text
Card 3
Some text
Some text
Card 4
Some text
Some text
Fixed/Sticky Footer Example
The footer is placed at the bottom of the page.