MEAN Stack Gitbook Learn CSS Layout Flexbox Froggy W3Schools

Front-End Challenges: Lesson 3

instructions: README

There are several ways to solve each problem but I primary depended on flexbox to arrange the layouts.
I included comments and clues to help out.

Please feel free to email me or message me on Glip if further clarification is needed!

Also, I would love to see what other solutions you came up with so feel free to send them my way!

Layout 1

example:

answer:

div 1

div 2

div 3

comments:

div 1 is it's own div, next div has div 2 and div 3 nested inside

justify-content: space-_________ (to split up the two divs at opposite ends horizontally)

Layout 2

example:

answer:

div 1

div 2

div 3

comments:

{ display: flex } for horizontal alignment
{justify-_________ : space-________ } to spread the three equal sized div boxes along the main axis
{position: relative} hint: move the boxes relative to it's parent starting point.

Layout 3

example:

answer:

div 1

div 2

comments:

there's one larger div that has 1 smaller div nested in it
apply { display: flex } to 2 separate parent-container (hint: div w/ the wrapper class is one of the divs...)
...and then you center it all around! (justify-content, align-items)
add some padding to move the boxes down

Layout 4

example:

answer:

div 1

div 2

comments:

one div will be {position: relative} to the other
assign div 2 to another class to change its background color

Layout 5

example:

answer:

comments:

this is very similar to layout 2...
{display: flex, justify-content: center}
play around with positions of the other divs

more comments are coming...

Layout 6

example:

answer:

Layout 7

example:

answer:

div

Layout 8

example:

answer:

div

Layout 9

example:

answer:

div 1

div 2

Layout 10

example:

div 1

div 2

Layout 11

example:

div 2

Layout 12

example:

div 1

div 2

div 3

comments:

this is very similar to layout 11
position relative and absolute

Layout 13

example:

div 1

div 2

div 3

div 4

div 5

Layout 1

example:

answer:

comments:

Layout 2

example:

answer:

comments:

Layout 3

example:

answer:

comments:

Layout 4

example:

answer:

comments:

Layout 5

example:

answer:

comments:

Layout 6

example:

answer:

Layout 7

example:

answer:

Layout 8

example:

answer:

Layout 9

example:

answer:

Layout 10

example:

Layout 11

example:

Layout 12

example:

comments:

Layout 13

example:

Layout 14

example:

Layout 15

example: