Flexbox - 入门教程

C 级联 S 样式 S 表集(CSS)是一种简单的设计语言，旨在简化使网页可呈现的过程。

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

要确定盒子的位置和尺寸，在CSS中，您可以使用一种可用的布局模式-

• The block layout   - 此模式用于布局文档。

• The inline layout   - 此模式用于布置文本。

• The table layout    - 此模式用于布置表格。

什么是Flexbox?

除上述模式外，CSS3还提供了另一种布局模式通常称为 Flexbox 。

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

Flexbox的函数

以下是Flexbox布局的显着函数-

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-overview.html

来源：LearnFk无涯教程网

• Direction    - 您可以按任意方向(如，从左到右，从右到左，从上到下和从下到上)排列网页上的项目。

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

• Wrap           - 如果网页内容的空间不一致(单行)，则可以将它们换行成多行(水平和垂直)。

• Alignment  - 使用Flexbox，您可以根据其集合对齐网页内容。

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

支持的浏览器

以下是支持Flexbox的浏览器。

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