Flexbox - 概述

C ascading S tyle S heets(CSS)是一种简单的设计语言,旨在简化使网页呈现的过程. CSS处理网页的外观和部分.

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

确定位置和尺寸在CSS中,您可以使用其中一种布局模式 :

  • 块布局 : 此模式用于布置文档.

  • 内联布局 : 此模式用于布置文本.

  • 表格布局 : 此模式用于布置表格.

  • 表格布局 : 此模式用于定位元素.

所有这些模式用于对齐特定元素,如文档,文本,表格等.然而,这些都没有提供一个完整的解决方案来布局复杂的网站.最初,这用于使用浮动元素,定位元素和表格布局(通常)的组合来完成.但浮动只允许水平放置框.

什么是Flexbox?

除了上述模式,CSS3还提供了另一种布局模式Flexible Box,通常称为 Flexbox .

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

Flexbox的功能

以下是值得注意的Flexbox布局和减号的功能;

  • 方向 : 您可以按任何方向排列网页上的项目,例如从左到右,从右到左,从上到下,从下到上.

  • 订单 : 使用Flexbox,您可以重新排列网页内容的顺序.

  • Wrap : 如果网页内容空间不一致(单行),您可以将它们包装成多行(水平)和垂直.

  • 对齐 : 使用Flexbox,您可以将网页的内容与其容器对齐.

  • 调整大小 : 使用Flexbox,您可以增加或减少页面中项目的大小以适应可用空间.

支持浏览器

以下是支持Flexbox的浏览器.

  • Chrome 29 +

  • Firefox 28 +

  • Internet Explorer 11 +

  • Opera 17 +

  • Safari 6.1+

  • Android 4.4 +

  • iOS 7.1 +