#2 Layout Design

Intro

Flex — Content First

Problem statement:

  • It is a fixed layout and a single page with no scrolling.
  • The header, navigation, and footer should have a height of 50px.
Simple Layout

Basic structure

1. Structure of HTML, 2. CSS, 3. Output

Aligning Content(Section and Article) and Aside

Content and Aside alignment
Flex grow: 1

Aligning Main and Footer

Main and footer
Aligning section and article
Final output

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store