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

View the full collection of blog posts/videos here: https://web-crunch.com/collections/css-flexbox

=====

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/intro-to-css-flexbox-what-is-css-flexbox

👋 Latest Course: HELLO HTML & CSS (coming soon)👋 https://hellohtmlcss.com

💎Ruby on Rails Course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt ... https://www.youtube.com/watch?v=0bh7Hgt2Uxs