#Flexbox Resources
#Top 3 recommended A Complete Guide to Flexbox | CSS-Tricks
How To Get Started With CSS Flexbox
#More resources CSS - flexbox
Better, Simpler Grid Systems - Solved by Flexbox - Cleaner, hack-free CSS
Experiment: Using Flexbox Today - Chris Wright
#Foundation supports Flexbox! Foundataion Flexbox Grid
Also checkout Flexbox Grid
###If you are interested and playing around with the code checkout out the attached files.
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- <link rel="stylesheet" href="style.css"> --> | |
| <link rel="stylesheet" href="style-with-side-bar.css"> | |
| </head> | |
| <body> | |
| <!-- <div class="flex container"> --> | |
| <!-- <div class="item child-1">Item 1</div> --> | |
| <!-- <div class="item child-2">Item 2</div> --> | |
| <!-- <div class="item child-3">Item 3</div> --> | |
| <!-- <div class="item child-4">Item 4</div> --> | |
| <!-- <div class="item child-5">Item 5</div> --> | |
| <!-- </div> --> | |
| <header class="flex"> | |
| <div class="logo"> | |
| Truefit | |
| </div> | |
| <ul class="flex nav"> | |
| <li><a href="#" class="nav-item">Home</a></li> | |
| <li><a href="#" class="nav-item">Contact Us</a></li> | |
| <li><a href="#" class="nav-item">About</a></li> | |
| </ul> | |
| </header> | |
| <div class="flex"> | |
| <aside class="flex side-bar"> | |
| <div id="side-item-1" class="side-bar-item side-bar-child-1">Research</div> | |
| <div id="side-item-2" class="side-bar-item side-bar-child-2">Design</div> | |
| <div id="side-item-3" class="side-bar-item side-bar-child-3">Engineering</div> | |
| </aside> | |
| <div class="flex container"> | |
| <div id="item-1" class="item child-1">Item 1</div> | |
| <div id="item-2" class="item child-2">Item 2</div> | |
| <div id="item-3" class="item child-3">Item 3</div> | |
| <div id="item-4" class="item child-4">Item 4</div> | |
| <div id="item-5" class="item child-5">Item 5</div> | |
| </div> | |
| </div> | |
| <footer class="flex"> | |
| <div class="footer-item"> | |
| Message us on Myspace | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
| /* Side bar example */ | |
| body{ | |
| background: blue; | |
| /* overflow: hidden; */ | |
| } | |
| .flex{ | |
| display: flex; | |
| } | |
| .container{ | |
| flex-flow: row wrap; | |
| justify-content: space-around; | |
| width: 100%; | |
| } | |
| .item{ | |
| padding: 20px; | |
| line-height: 100px; | |
| color: green; | |
| font-weight: bold; | |
| font-size: 3em; | |
| text-align: center; | |
| background: lightblue; | |
| height: 200px; | |
| border: red solid 2px; | |
| } | |
| .child-1{ | |
| } | |
| .child-2{ | |
| } | |
| .child-3{ | |
| height: 150px; | |
| } | |
| .child-4{ | |
| } | |
| .child-5{ | |
| height: 500px; | |
| } | |
| /* .child-1{ */ | |
| /* flex: 1 0 200px; */ | |
| /* } */ | |
| /* .child-2{ */ | |
| /* flex: 2 0 100px; */ | |
| /* } */ | |
| /* .child-3{ */ | |
| /* flex: 1 0 50px; */ | |
| /* height: 150px; */ | |
| /* } */ | |
| /* .child-4{ */ | |
| /* flex: 3 0 100px; */ | |
| /* } */ | |
| /* .child-5{ */ | |
| /* flex:1 0 100px; */ | |
| /* height: 500px; */ | |
| /* } */ | |
| .side-bar{ | |
| flex-flow: column wrap; | |
| justify-content: space-around; | |
| align-items: center; | |
| align-content: center; | |
| height: 700px; | |
| width: 300px; | |
| background: yellow; | |
| } | |
| .side-bar-item{ | |
| line-height: 100px; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 2em; | |
| text-align: center; | |
| background: tomato; | |
| height: 200px; | |
| width: 200px; | |
| margin: auto: | |
| } | |
| .side-bar-child-1{ | |
| flex-grow: 1; | |
| } | |
| .side-bar-child-2{ | |
| flex-grow: 2; | |
| } | |
| .side-bar-child-3{ | |
| flex-grow: 1; | |
| } | |
| .logo{ | |
| color: orange; | |
| font-size: 3em; | |
| } | |
| header{ | |
| background: green; | |
| width: 100%; | |
| height: auto; | |
| padding: 10px; | |
| justify-content: space-between; | |
| } | |
| .nav{ | |
| list-style: none; | |
| flex-flow: row wrap; | |
| justify-content: flex-end; | |
| } | |
| .nav-item{ | |
| background: lightgreen; | |
| font-size: 2em; | |
| padding: 10px; | |
| color: red; | |
| text-align: center; | |
| margin: auto; | |
| display: block; | |
| } | |
| /* .nav-child-1{ */ | |
| /* flex-grow: 1; */ | |
| /* } */ | |
| /* .nav-child-2{ */ | |
| /* flex-grow: 2; */ | |
| /* } */ | |
| /* .nav-child-3{ */ | |
| /* flex-grow: 1; */ | |
| /* } */ | |
| footer{ | |
| background: purple; | |
| height: 200px; | |
| justify-content: flex-end; | |
| align-items: center; | |
| color: white; | |
| font-size: 5em; | |
| margin: auto; | |
| } | |
| footer-item{ | |
| margin: auto; | |
| height: 100px; | |
| } | |
| @media all and (max-width: 600px){ | |
| header{ | |
| flex-flow: column nowrap; | |
| padding: 0; | |
| } | |
| .logo{ | |
| align-self: center; | |
| } | |
| .nav{ | |
| flex-flow: column nowrap; | |
| justify-content: center; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .nav-item{ | |
| text-align: center; | |
| padding: 10px; | |
| border-bottom: solid red 5px; | |
| } | |
| footer{ | |
| font-size: 1.5em; | |
| } | |
| } |
| body{ | |
| background: blue; | |
| } | |
| .flex{ | |
| display: flex; | |
| } | |
| .container{ | |
| background: yellow; | |
| flex-flow: row wrap; | |
| justify-content: center; | |
| align-items: center; | |
| align-content: space-around; | |
| margin: 50px; | |
| /* width: 700px; */ | |
| height: 800px; | |
| } | |
| .item{ | |
| padding: 20px; | |
| line-height: 100px; | |
| color: green; | |
| font-weight: bold; | |
| font-size: 3em; | |
| text-align: center; | |
| background: lightblue; | |
| border: red solid 5px; | |
| /* height: 200px; */ | |
| width: 100px; | |
| } | |
| .child-1{ | |
| /* flex-grow: 1; */ | |
| /* height: 100px; */ | |
| } | |
| .child-2{ | |
| /* flex-grow: 2; */ | |
| /* height: 100px; */ | |
| /* width: 200px; */ | |
| } | |
| .child-3{ | |
| /* flex-grow: 1; */ | |
| /* height: 200px; */ | |
| } | |
| .child-4{ | |
| /* flex-grow: 2; */ | |
| /* height: 200px; */ | |
| /* width: 300px; */ | |
| } | |
| .child-5{ | |
| /* flex-grow: 1; */ | |
| /* height: 100px; */ | |
| } |