Intro to CSS Flexbox - What is CSS flexbox?

Welcome to a new mini-series on CSS Flexbox. This series is designed to uncover what flexbox is and how to use it effectively for creating powerful CSS layouts and designs in your own websites and apps.

The Flexbox Layout (Flexible Box) module is responsible for providing a more efficient way to layout, align, and distribute space among items in a parent flex container. These items will resize dynamically thus allowing the experience of coding a CSS flexbox design to be almost automatic.

Flex layouts give the parent flex container the ability to alter its items’ width, height, and order to best fill the available space within that container. A flex container expands items to fill available free space or shrinks them based on additional CSS properties you can optionally pass.

Flexbox is a kick-butt tool for mobile layouts as well since the dynamic side of it allows content to flex proportionally given any screen size.

This guide is a quick precursor to more aspects of Flexbox I'll be covering in this series

Really useful links for learning even more

• CSS Tricks Comprehensive Flexbox Guide
• MDN - Flexbox
• What the flexbox? - Wes Bos