Recreate a very similar file to the images shown below using the directions in Parts 1 & 2.
- Start with the larger screen and work your way to smaller. Begin with a fresh layout and do not use media queries.
- Place your
nav
AFTER themain
content. - Create a
<div class="container">
that encompasses the<body>
. - Set the
header
andfooter
to fill the width of the screen usingflex: flex-grow flex-shrink flex-basis;
(with values included). - Using
order: x
, display elements visually by orderingheader
first, thennav
,main
,sidebar
, and finallyfooter
.
- Make
nav
andaside
the same size using the sameflex-grow
andflex-shrink
values. - The
main
content should be larger thannav
andaside
in normal width (not mobile). - When
.container
is larger than 900px, distribute items evenly. When.container
is smaller than 900px, items that don't fit should wrap to the next line. - Use a
flex-shrink
to ensure items are not removed fromnav
andaside
items. - Use
body
as a flex container. The<div class="container">
becomes the child. Set adisplay-flex
tobody
content tojustify-content: center
to center the content of the page on large widths, but still fill the width on smaller screens.