└── flex ├── flex.css └── flex.html /flex/flex.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Arial, Helvetica, sans-serif; 4 | } 5 | 6 | .header { 7 | padding: 60px; 8 | color: white; 9 | text-align: center; 10 | background-color: #1abc9c; 11 | } 12 | 13 | .navbar { 14 | display: flex; 15 | align-items: start; 16 | background-color: #333; 17 | } 18 | 19 | .navbar a { 20 | color: white; 21 | padding: 15px 20px; 22 | text-align: center; 23 | text-decoration: none; 24 | } 25 | 26 | .navbar a:hover { 27 | color: black; 28 | background: #ddd; 29 | } 30 | 31 | .row { 32 | display: flex; 33 | } 34 | 35 | .row .side { 36 | padding: 20px; 37 | background-color: #f1f1f1; 38 | } 39 | 40 | .row .main { 41 | padding: 20px; 42 | } 43 | 44 | .row .fakeimg { 45 | padding: 20px; 46 | background-color: #aaa; 47 | } 48 | 49 | .footer { 50 | padding: 20px; 51 | text-align: center; 52 | background-color: #ddd; 53 | } 54 | 55 | @media screen and (max-width: 700px) { 56 | 57 | .row, 58 | .navbar { 59 | flex-direction: column; 60 | } 61 | 62 | .navbar a { 63 | width: 100%; 64 | } 65 | } -------------------------------------------------------------------------------- /flex/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | FLEXBOX WEBSITE 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Resize the browser window to see the responsive effect.

16 |
17 | 18 | 19 |
20 |

My Website

21 |

With a flexible layout.

22 |
23 | 24 | 25 | 31 | 32 | 33 |
34 | 45 |
46 |

TITLE HEADING

47 |
Title description, Dec 7, 2017
48 |
Image
49 |

Some text..

50 |

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod 51 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 52 | ullamco.

53 |
54 |

TITLE HEADING

55 |
Title description, Sep 2, 2017
56 |
Image
57 |

Some text..

58 |

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod 59 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 60 | ullamco.

61 |
62 |
63 | 64 | 65 | 68 | 69 | 70 | 71 | --------------------------------------------------------------------------------