CSS 弹性盒子布局

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

基本例子

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

参考

CSS 属性

对齐属性

属性 align-contentalign-selfalign-itemsjustify-content 最初出现在 Flexbox 规范中,但现在在 Box Alignment 中定义,Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment 中还定义了其他对齐属性。

术语表

指南

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

规范

Specification
CSS Flexible Box Layout Module Level 1