超级会员免费看
本文详细介绍了CSS Flexbox布局模块，包括浏览器支持、Flexbox元素的使用，如父元素（容器）的属性如flex-direction、flex-wrap、justify-content等，以及子元素（项目）的属性，如order、flex-grow、flex-shrink等。通过实例展示了如何创建响应式布局，使开发者能够更轻松地设计灵活的响应式网页。
CSS Flexbox 布局模块
在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：
- 块（Block），用于网页中的部分（节）
- 行内（Inline），用于文本
- 表，用于二维表数据
- 定位，用于元素的明确位置
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
浏览器支持
所有现代浏览器均支持 flexbox 属性。
Flexbox 元素
如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。
上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。
实例
含有三个 flex 项目的 flex 容器：
订阅专栏 解锁全文
扫一扫
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
