Demonstration of layouts created using FlexBox
Clone or download
Jennifer Bland
Jennifer Bland Upated html code
Latest commit 920d7b4 Sep 5, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Rename image Sep 4, 2017
.gitignore Initial Commit Sep 4, 2017
3columnlayout.html Initial Commit Sep 4, 2017
InputAddon.html Upated html code Sep 4, 2017
README.md Updated readme file Sep 4, 2017
centerImage.html Initial Commit Sep 4, 2017
index.html Initial Commit Sep 4, 2017
navigation.html Initial Commit Sep 4, 2017
normalize.css Initial Commit Sep 4, 2017
responsiveWebsite.html Initial Commit Sep 4, 2017
style.css Upated html code Sep 4, 2017

README.md

Made With FlexBox

This is the code that goes with my article on medium titled "5 Layouts Made Using FlexBox"

Intro to FlexBox

The CSS Flexible Box Layout – Flexbox – provides a simple solution to the design and layout problems designers and developers have faced with CSS. Let me show you how to use it to generate some common layouts and challenges that you will face in designing a responsive website design.

What We Will Be Making

  1. Navigation
  2. Center image on screen
  3. Responsive website layout
  4. AddOn for input fields
  5. 3 column layout

Home Page Layout

The homepage provides links to all of the example layouts that we will be creating. You can click on any entry and be shown that image in production.

Homepage Layout