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+