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/XWorVNY
Multi-keyword syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display
Block formatting context: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Logical CSS Properties: https://youtu.be/cV9JhEV4Ll0

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: https://twitter.com/CSSWeekly
👉 Instagram: https://instagram.com/cssweekly
👉 Facebook: https://www.facebook.com/CSSWeekly/

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

- Zoran Jambor
#css #cssbasics

Видео CSS "display" is Multi-Keyword Property — What You Need To Know канала CSS Weekly