Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

January 17, 2021

Last updated November 5, 2023

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

Tags: flexbox
Link this article
Est. reading time: 1 minutes
Stats: 1,216 views



Part of the CSS Flexbox collection

Products and courses