CSS 学习手册
免费学习
完整知识体系
快速检索
CSS学习手册《Flexbox 项目属性》：除了容器属性，Flexbox 项目也可以单独设置属性，控制其在容器内的表现。 **项目属性：** - **order**：项目的排列顺序（数值越小越靠前，默认为 0） - **flex-grow**：项目放大比例（默认为 0，不放大；若...
Flexbox 布局
Flexbox 项目属性
【详细说明 & 代码示例】
除了容器属性，Flexbox 项目也可以单独设置属性，控制其在容器内的表现。
**项目属性：**
- **order**：项目的排列顺序（数值越小越靠前，默认为 0）
- **flex-grow**：项目放大比例（默认为 0，不放大；若为 1，则占据剩余空间）
- **flex-shrink**：项目缩小比例（默认为 1，空间不足时会缩小）
- **flex-basis**：项目的基础尺寸（默认为 auto）
- **flex**：简写，`flex: grow shrink basis`（如 `flex: 1` 等价于 `1 1 0%`）
- **align-self**：覆盖容器的 align-items 设置
```css
/* 左侧边栏固定宽度，右侧内容自适应 */
.sidebar { width: 200px; flex-shrink: 0; } /* 不缩小 */
.content { flex: 1; } /* 占据剩余空间 */
/* 项目居中 */
.item { align-self: center; }
/* 调整顺序 */
.last-item { order: 2; } /* 排在最后（如果其他项目 order 默认为 0） */
```
**常用布局模式：**
- 水平垂直居中：`justify-content: center; align-items: center;`
- 等分布局：所有项目设置 `flex: 1`
- 圣杯布局：结合 `flex-grow` 和 `order`
学习提示：建议打开浏览器开发者工具（F12），在 Elements 面板中实时调试样式，动手实践效果更佳。
全部章节目录（共 55 个知识点）
布局 (2个知识点)
Flexbox 布局 (3个知识点)
定位 (2个知识点)
过渡与动画 (2个知识点)
变换 (1个知识点)
响应式设计 (2个知识点)
CSS 预处理器 (2个知识点)
CSS 框架 (2个知识点)
高级特性 (6个知识点)
性能优化 (2个知识点)
CSS 函数 (2个知识点)
CSS 数学 (1个知识点)
CSS 逻辑 (1个知识点)
CSS 滚动 (1个知识点)
CSS 遮罩 (1个知识点)
CSS 混合模式 (1个知识点)
CSS 书写模式 (1个知识点)
CSS 布局（旧） (1个知识点)
使用说明
- • 本手册涵盖 CSS 从入门到进阶的完整知识体系
- • 在搜索框输入关键词，快速定位相关知识点
- • 点击条目标题进入详情页，查看详细说明与代码示例
- • 页面按分类展示所有知识点，方便系统性学习
- • 建议打开浏览器开发者工具（F12）实时调试样式，加深理解