Section4-AdvancedCSS-Flexbox

Advanced CSS: Flexbox

Notes:

Flexbox MDN Documentation

Basic Concepts of Flexbox MDN

Complete Guide To FlexBox - CSS Tricks

Flexbox Froggy - Learn flexbox through a game

Container Properties:

• flex-direction
• justify-content
• flex-wrap
• align-items
• align-content

Flex Item Properties:

• order
• flex

• flex-grow

  Article: flex-grow is weird. Or is it?

• flex-shrink

• flex-basis

  Article: The difference between width and flex basis

• align-self

Exercises Links:

Flexbox SideNav

This exercise puts to use the parent container element properties in FlexBox

Codepen link

Responsive SideNav

Combines previous container properties w/ new ones like align-content and align-items

Codepen link

Polygon.com Widget

Exercise utilizes flex property of items

Codepen link

Holy Grail Layout

Web design layout that's fully responsive fully solvable only by flexbox. In this exercise I deviated from Colt's solution only by reversing the principle - I made the design mobile first (Colt's solution was laptop first then adjust to mobile at the break point)

Codepen Link

I also did the Holy Grail Layout combining both CSS Grid and Flexbox. In this exercise, I used CSS Grid for the Header and Flexbox for the Main content

Codepen Link

Further I did the whole Holy Grail Layout using only CSS Grid.

Codepen Link