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 弹性盒子

循序渐进的讲解如何用此特性来建立布局。

Flexbox 与其他布局方法的关系

Flexbox 如何与其他布局方法和其他 CSS 规范相关

对齐 Flex 容器中的项目

Box Alignment 属性如何与 flexbox 一起使用。

弹性项顺序

解释改变项目顺序和方向的不同方法,并解决这样做的潜在问题。

控制柔性项沿主轴的比率

本文介绍了 flex-grow,flex-shrink 和 flex-basis 属性。

精通包装弹性项

如何使用多行创建 Flex 容器并控制这些行中项目的显示。

Flexbox 的典型用例

常见的设计模式是典型的 flexbox 用例。

用弹性盒子进行 Web 应用布局

讲解在 Web 应用的特定环境下如何应用弹性盒子。

规范

Specification
CSS Flexible Box Layout Module Level 1