CSS 弹性盒子布局 - CSS（层叠样式表） 编辑

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

基本例子

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

示例地址：https://www.wenjiangs.com/runcode?slug=UP8PVwtP

参考

CSS 属性

• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• order

对齐属性

属性 align-content、align-self、align-items 和 justify-content 最初出现在 Flexbox 规范中，但现在在Box Alignment中定义，Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment中还定义了其他对齐属性。

• align-content
• align-items
• align-self
• justify-content
• place-content
• row-gap
• column-gap
• gap

术语表

• 弹性盒子（Flexbox）
• 伸缩容器 （Flex Container）
• 弹性项目（Flex Item）
• 主轴（Main Axis）
• 交叉轴（Cross Axis）
• 伸缩性 （Flex）

指南

弹性盒子基本概念

概述flexbox的功能

使用 CSS 弹性盒子

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

Flexbox与其他布局方法的关系

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

对齐Flex容器中的项目

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

弹性项顺序

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

控制柔性项沿主轴的比率

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

精通包装弹性项

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

 Flexbox 的典型用例

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

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

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

Flexbox的向后兼容性

Flexbox的浏览器状况，互操作性问题以及支持的旧浏览器和规范版本

规范

浏览器兼容性

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!

• Desktop
• Mobile