CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。

基本例子

 

在以下示例中,已将容器设置为 display: flex ,这意味着三个子项成为弹性项。justify-content 的值已设置为 space-between ,以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间,左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸,因为 align-items 的默认值为 stretch。这些项目伸展到Flex容器的高度,使它们看起来都像最高的项目一样高。

 

参考

CSS 属性

指南

弹性盒子基本概念
概述flexbox的功能
使用 CSS 弹性盒子
循序渐进的讲解如何用此特性来建立布局。
Flexbox与其他布局方法的关系
Flexbox如何与其他布局方法和其他CSS规范相关
对齐Flex容器中的项目
Box Alignment属性如何与flexbox一起使用。
弹性项顺序
解释改变项目顺序和方向的不同方法,并解决这样做的潜在问题。
控制柔性项沿主轴的比率
本文介绍了flex-grow,flex-shrink和flex-basis属性。
精通包装弹性项
如何使用多行创建Flex容器并控制这些行中项目的显示。
 Flexbox 的典型用例
常见的设计模式是典型的flexbox用例。
用弹性盒子进行 Web 应用布局
讲解在 Web 应用的特定环境下如何应用弹性盒子。
Flexbox的向后兼容性
Flexbox的浏览器状况,互操作性问题以及支持的旧浏览器和规范版本

规范

规范 状态 注解
CSS Flexible Box Layout Module Candidate Recommendation 初始定义。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基础支持 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
特性 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基础支持 (Yes) 4.4 11 12.10 7.1-webkit

 

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,