CSS 布局:从浮动到Flexbox和网格

CSS 布局:从浮动到Flexbox和网格

For decades, CSS developers fiddled with floats to create flexible layouts that worked across browsers. But their brilliant hack had a lot of downsides. The latest generation of CSS specs offers a better and vastly more intuitive set of tools, but moving from floats to Grid, Flexbox, or both means adjusting how you think. In this course, Christina Truong guides you though this process, from initial concepts to complete conversion, highlighting the different ways to create page layouts with modern CSS. Explore how to work with the display and float properties; use relative, absolute, and fixed positioning for laying out components; create basic Grid and Flexbox layouts; and more.

Topics include:

  • Layouts with HTML and CSS
  • Using the display and float properties
  • Using relative and absolute positioning
  • Building page layouts with Flexbox
  • How Grid differs from Flexbox
  • Creating a basic Grid layout
  • Positioning with Grid


  • 英文名称:CSS Layouts: From Float to Flexbox and Grid
  • 时长:1小时46分
  • 字幕:英语


  1. Welcome
  2. What you should know
  3. Using the exercise files
  4. Layouts with HTML
  5. Layouts with CSS
  6. Browser support and CSS standards
  7. Inline and block elements
  8. The box model properties
  9. The display property
  10. The box model and layouts
  11. The float property
  12. Clearing floats
  13. Setting up your project
  14. Exercise: Build a layout with float
  15. Position: Relative and absolute
  16. Position: Fixed, sticky, and static
  17. Getting started with Flexbox
  18. Orientation with flex-direction and flex-wrap
  19. Flexible sizing
  20. Sizing multiple flex items
  21. The order property
  22. Nesting flex containers
  23. Exercise: Build a layout with Flexbox
  24. Exercise: Build a layout with Flexbox
  25. Grid vs. Flexbox
  26. Grid, grid systems, and CSS Grid
  27. Create a basic Grid layout
  28. Columns, rows, and gutters with Grid
  29. Positioning with Grid
  30. Exercise: Build a layout with Grid
  31. Firefox Grid Inspector
  32. Next steps and resources