DEV Community

Cover image for Intro to CSS Flexbox - What is CSS flexbox?
Andy Leverenz
Andy Leverenz

Posted on • Originally published at web-crunch.com

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

New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch.

hello HTML css course

Top comments (0)