CSS "display" is Multi-Keyword Property — What You Need To Know

Learn how the multi-keyword syntax of CSS display property works and why you should start using it, along with an explanation of Block Formatting Context (BFC) and newer Flow and Flow-Root display values.

🔗 Links
Demo: https://codepen.io/ZoranJambor/pen/XW...
Multi-keyword syntax: https://developer.mozilla.org/en-US/d...
Block formatting context: https://developer.mozilla.org/en-US/d...
Logical CSS Properties:    • In-Depth Guide to CSS Logical Properties  

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: https://masteringlinting.com/
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted, pre-launch price.

📖 Chapters
00:00 Intro & demo setup
00:42 How display property works with block & inline values
02:07 How display property works with flex & grid values
03:24 How inner and outer display type work
04:30 Multi-value mappings for existing values & browser support
05:04 How flow and flow-root values for display property work
05:37 What is Block Formatting Context (BFC)
06:23 How to clear float with flow-root property
08:24 Should you use multi-keyword syntax for display?

Keep up-to-date with CSS Weekly:
👉 Twitter:   / cssweekly  
👉 Instagram:   / cssweekly  
👉 Facebook:   / cssweekly  

Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter:   / zoranjambor  
👉 LinkedIn:   / zoranjambor  

- Zoran Jambor
#css #cssbasics