Flexbox - 概述

Cascading Style Sheets (CSS) 是一种简单的设计语言，旨在简化网页排版过程。CSS 负责网页的视觉效果。

使用 CSS，您可以控制文本颜色、字体样式、段落间距、列大小和布局、使用的背景图像或颜色、布局设计、不同设备和屏幕尺寸的显示变化以及各种其他效果。

为了确定 CSS 中盒子（元素）的位置和尺寸，您可以使用以下一种可用的布局模式：

• 块级布局 - 此模式用于文档布局。

• 内联布局 - 此模式用于文本布局。

• 表格布局 - 此模式用于表格布局。

• 表格布局 - 此模式用于元素定位。

所有这些模式都用于对齐文档、文本、表格等特定元素，但是，这些模式都不能提供完整的解决方案来布局复杂的网站。最初，这通常是使用浮动元素、定位元素和表格布局的组合来完成的。但是浮动只允许水平定位盒子。

什么是 Flexbox？

除了上述模式之外，CSS3 还提供另一种布局模式：弹性盒子，通常称为Flexbox。

使用此模式，您可以轻松创建复杂应用程序和网页的布局。与浮动不同，Flexbox 布局可以完全控制盒子的方向、对齐方式、顺序和大小。

Flexbox 的特性

以下是 Flexbox 布局的显著特性：

• 方向 - 您可以将网页上的项目排列在任何方向，例如从左到右、从右到左、从上到下和从下到上。

• 顺序 - 使用 Flexbox，您可以重新排列网页内容的顺序。

• 换行 - 如果网页内容的空间不足（单行），您可以将其换行到多行（水平和垂直）。

• 对齐 - 使用 Flexbox，您可以相对于其容器对齐网页内容。

• 调整大小 - 使用 Flexbox，您可以增加或减小页面中项目的大小以适应可用空间。

支持的浏览器

以下是支持 Flexbox 的浏览器：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+
• Android 4.4+
• iOS 7.1+