Flexbox - 概述
CSS(层叠样式表)是一种简单的设计语言，旨在简化网页的呈现过程。CSS 处理网页的外观和感觉部分。
使用 CSS，您可以控制文本的颜色、字体的样式、段落之间的间距、列的大小和布局方式、使用的背景图像或颜色、布局设计、不同设备和屏幕尺寸的显示变化以及各种其他效果。
要确定框的位置和尺寸，在 CSS 中，您可以使用可用的布局模式之一 −
块布局 − 此模式用于布局文档。
内联布局 −此模式用于布局文本。
表格布局 − 此模式用于布局表格。
表格布局 − 此模式用于定位元素。
所有这些模式都用于对齐特定元素，如文档、文本、表格等，但是，这些模式都无法提供布局复杂网站的完整解决方案。最初，这通常使用浮动元素、定位元素和表格布局的组合来完成。但浮动仅允许水平定位框。
什么是 Flexbox?
除了上述模式外，CSS3 还提供了另一种布局模式 Flexible Box，通常称为 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+
