|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/introduction-to-css-flexbox/
课程评论：没有评论
课程名称：CSS Flexbox 入门 课程概述：本课程旨在帮助您利用 CSS Flexbox 的强大功能提升 HTML 网页布局的灵活性。Flexbox 是一种布局模型，可以让您精准控制对齐、间距和响应式设计。课程通过清晰的示范，让您深入了解每个 Flexbox 属性的工作原理，包括父容器属性和子项属性。 主要内容包括： 1. **应用于父容器的属性**： - **flex-direction**：设置项目的排列方向（行或列）。 - **flex-wrap**：控制项目是换行还是保持在同一行。 - **flex-flow**：结合 flex-direction 和 flex-wrap 的简写形式。 - **justify-content**：在主轴上对齐项目（如左侧、居中、间隔均匀）。 - **align-items**：在交叉轴上对齐项目。 - **align-content**：控制多行项目之间的间距。 2. **应用于单个 flex 项目的属性**： - **flex-basis**：定义项目在空间分配之前的初始大小。 - **flex-grow**：在 flex 项目之间分配剩余空间。 - **flex-shrink**：在空间受限时控制项目的缩小。 - **flex**：简写设置 flex-grow、flex-shrink 和 flex-basis。 - **order**：改变项目的视觉顺序。 - **align-self**：覆盖特定项目的对齐方式。 为了支持更深入的理解，课程还包括辅助文章，解释 flex-grow 和 flex-shrink 在不同场景下如何分配或减少空间的基本原理。 课程结束后，您不仅能理解如何使用 Flexbox，还能明白其行为原理，从而在构建灵活布局时更具信心和控制力。
This course is designed to help you elevate your HTML webpage layouts using the power of CSS Flexbox - a layout model that gives you precise control over alignment, spacing, and responsiveness.You'll learn how each Flexbox property works through clear demonstrations, covering both parent container properties and child item properties.Properties applied to the parent flex container:flex-direction - Set the direction items are laid out (row or column)flex-wrap - Control whether items wrap or stay on a single lineflex-flow - Combine flex-direction and flex-wrap with a shorthandjustify-content - Align items along the main axis (e.g., left, center, space-around)align-items - Align items along the cross axisalign-content - Control spacing between multiple lines of itemsProperties applied to individual flex items:flex-basis - Define an item's initial size before space is distributedflex-grow - Distribute remaining space between flex itemsflex-shrink - Control how items shrink when space is limitedflex - A shorthand for setting flex-grow, flex-shrink, and flex-basisorder - Change the visual order of itemsalign-self - Override alignment for a specific itemTo support deeper understanding, the course also includes supporting articles that explain the underlying math behind how flex-grow and flex-shrink distribute or reduce space in different scenarios.By the end of this course, you'll not only understand how to use Flexbox - you'll also know why it behaves the way it does, giving you greater confidence and control when building flexible layouts.
