Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Flexbox Flexible Box Layouts Flex Website

Learn to build flexible layouts for websites or interfaces using the Flexible box model of CSS. Flexible Box Layout Module Combine this with CSS3 Media Queries to make impressive fully responsive-flexible layouts. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Flexbox Layout Tutorial</title> <style> body { margin: 0px; } body > div{ display: flex; flex-flow: row wrap; } body > div > header,nav,main,aside,footer { background: #CCC; border-radius: 7px; margin:5px; padding: 20px; } body > div > header { order: 1; height:100px; flex: 0 1 100%; } body > div > nav { order: 2; width: 200px; flex: 0 1 200px; } body > div > main { order: 3; min-height:400px; flex:1; } body > div > aside { order: 4; width: 200px; flex: 0 1 200px; } body > div > footer { order: 5; height:250px; flex: 0 1 100%; } </style> </head> <body> <div> <header>Header</header> <nav>Navigation</nav> <main>Main Content</main> <aside>Aside Content</aside> <footer>Footer</footer> </div> </body> </html>
thumb

CSS Videos

Responsive Dynamic Layouts

Media Queries Responsive Website Layout TutorialResponsive Web Design Made Simple CSS media Rule TutorialMobile Friendly Test Responsive Website Development Case StudyViewport Percentage Units CSS HTML Layout TutorialAuto Adjusting Stretch Fit Website Layout TutorialBackground Size Scale Stretch ImageMulti Column Content Layout Grid TutorialFlexbox Flexible Box Layouts Flex WebsiteGrid Layout CSS Tutorial and Documentation Reference