The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2017 [Video]

The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2017 [Video]

Peter Sommerhoff

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!
Mapt Subscription
FREE
$29.99/m after trial
Video
$28.50
RRP $94.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$28.50
$29.99p/m after trial
RRP $94.99
Subscription
Video
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Video Details

ISBN 139781788628112
Course Length2 hours 04 minutes

Video Description

After this course, you'll be able to use Flexbox to vertically align any element, create modern gridstake up remaining space, add spacing between elements, implement complete site layouts and much more!Inside the course, I'll answer all questions you may have along the way.To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects. I look forward to seeing you inside. As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you've learned and to refer back to while using Flexbox. Additionally, I included the code for a Flexbox demo showcase -- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.

Style and Approach

Inside the course, I'll answer all questions you may have along the way.To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects.

Table of Contents

Welcome To The Flexbox Course!
How To Make The Most Of This Course
Let's Dive Right In: Learn The Flexbox Basics
What is Flexbox and Why Should I Use It?
What About Browser Support for Flexbox?
How Do I Use Flexbox?
Flexbox Principles
Styling Flex Containers
flex-direction - Creating Row & Column Layouts
justify-content - Justifying Items Along the Main Axis
align-items - Aligning Items Along the Cross Axis
flex-wrap - Multiple Rows & Wrapping Inside Flex Containers
align-content - Justifying Content Along the Cross Axis
Designing Flex Items
order - Reordering Flex Items
align-self - Stubborn Children
flex-grow - Letting Children Grow
flex-shrink - Shrinking Flex Items
flex-basis - Setting the Base Size
Flexbox in Practice
Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)
Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)
Real Vertical Centering with Flexbox (no more vertical-align)
The Media Object Pattern
The Holy Grail Layout
Where to go from here...
A Quick Recap & What's Next

What You Will Learn

  • Use CSS Flexbox confidently to create modern layouts
  • Create web site designs more effectively
  • Write high-quality and reusable CSS code
  • Vertically align any element
  • Take up the remaining space in a container
  • Beautiful responsive galleries with Flexbox
  • Implement the so-called Holy Grail Layout

Authors

Table of Contents

Welcome To The Flexbox Course!
How To Make The Most Of This Course
Let's Dive Right In: Learn The Flexbox Basics
What is Flexbox and Why Should I Use It?
What About Browser Support for Flexbox?
How Do I Use Flexbox?
Flexbox Principles
Styling Flex Containers
flex-direction - Creating Row & Column Layouts
justify-content - Justifying Items Along the Main Axis
align-items - Aligning Items Along the Cross Axis
flex-wrap - Multiple Rows & Wrapping Inside Flex Containers
align-content - Justifying Content Along the Cross Axis
Designing Flex Items
order - Reordering Flex Items
align-self - Stubborn Children
flex-grow - Letting Children Grow
flex-shrink - Shrinking Flex Items
flex-basis - Setting the Base Size
Flexbox in Practice
Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)
Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)
Real Vertical Centering with Flexbox (no more vertical-align)
The Media Object Pattern
The Holy Grail Layout
Where to go from here...
A Quick Recap & What's Next

Video Details

ISBN 139781788628112
Course Length2 hours 04 minutes
Read More

Read More Reviews

Recommended for You

CSS Development with CSS3 [Video] Book Cover
CSS Development with CSS3 [Video]
$ 99.99
$ 30.00
Mastering CSS3 Colors [Video] Book Cover
Mastering CSS3 Colors [Video]
$ 49.99
$ 15.00
Web Visualization with HTML5, CSS3, and JavaScript [Video] Book Cover
Web Visualization with HTML5, CSS3, and JavaScript [Video]
$ 74.99
$ 22.50
Building an E-learning Course with Camtasia Studio 8 [Video] Book Cover
Building an E-learning Course with Camtasia Studio 8 [Video]
$ 84.99
$ 25.50
PHP Specialist (2017 Edition) [Video] Book Cover
PHP Specialist (2017 Edition) [Video]
$ 199.99
$ 60.00