|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/draft/5926004/
课程评论：没有评论
**课程名称：CSS Flexbox入门** **课程概述：** 本课程旨在帮助您掌握CSS Flexbox布局模型，利用其强大的功能实现HTML网页布局的精确控制，包括对齐、间距和响应式设计。您将通过清晰的演示，深入理解Flexbox的各项属性，涵盖父容器属性和子项属性。 **课程内容：** * **父容器属性：** * `flex-direction`：设置项目在主轴上的排列方向（行或列）。 * `flex-wrap`：控制项目是否换行或保持在单行。 * `flex-flow`：`flex-direction` 和 `flex-wrap` 的简写属性。 * `justify-content`：沿主轴对齐项目（例如，靠左、居中、两端对齐）。 * `align-items`：沿交叉轴对齐项目。 * `align-content`：控制多行项目之间的间距。 * **子项属性：** * `flex-basis`：定义在空间分配前项目的初始大小。 * `flex-grow`：在有剩余空间时，分配给项目的比例。 * `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.
