Flexbox 概述学习手册

收录于 2023-04-20 00:10:05 · English · بالعربية · Español · हिंदीName · 日本語 · Русский язык · 中文繁體

Cascading Style Sheets (CSS) 是一种简单的设计语言,旨在简化网页呈现的过程。 CSS 处理网页的外观和感觉部分。
使用 CSS,您可以控制文本颜色、字体样式、段落间距、列的大小和布局方式、使用的背景图像或颜色、布局设计、不同设备的显示变化和屏幕尺寸以及各种其他效果。
要确定框的位置和尺寸,在 CSS 中,您可以使用可用的布局模式之一-
块布局-此模式用于布置文档。 内联布局-此模式用于布局文本。 表格布局-此模式用于布置表格。 表格布局-此模式用于定位元素。
所有这些模式都用于对齐文档、文本、表格等特定元素,但是,这些模式都没有提供一个完整的解决方案来布局复杂的网站。最初,这是使用浮动元素、定位元素和表格布局(通常)的组合来完成的。但是浮动只允许水平定位框。

什么是弹性盒?

除了上述模式之外,CSS3还提供了另一种布局模式Flexible Box,通常称为 Flexbox
使用此模式,您可以轻松地为复杂的应用程序和网页创建布局。与浮动不同,Flexbox 布局可以完全控制框的方向、对齐、顺序和大小。

Flexbox 的特性

以下是 Flexbox 布局的显着特点-
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+