深入剖析CSS弹性盒模型Flex布局
22 浏览量
更新于2024-08-31
收藏 497KB PDF 举报
深入剖析CSS弹性盒模型flex
CSS 弹性盒模型(flex)是一种新的布局模型,引入于 CSS3 中,提供了一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕。flex 是 flexible box 的缩写,通常称之为弹性盒模型。
flex 布局的语法规范经过了很大的变化,经历了三个版本:旧版本、混合版本和新版本。旧版本使用 `display: box` 或 `display: inline-box`,但该版本 IE 浏览器不支持,且其他浏览器和移动端都需要添加前缀。混合版本使用 `display: flexbox` 或 `display: inline-flexbox`,该版本只有 IE10 支持,且需要添加前缀 `-ms-`。新版本使用 `display: flex` 或 `display: inline-flex`,该版本兼容 IE11+、firefox、safari、chrome、opera 及移动端。
要让一个元素变成伸缩容器,需要使用 `display` 属性。采用 flex 布局的元素,称为伸缩容器(flex container),容器内的子元素称为伸缩项目(flex item)。浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。
使用 flex 布局实现上是使元素 FFC 化(flex formatting context 伸缩格式化上下文),FFC 是普通流的一种。而浮动流和定位流以及 CSS 其他属性对 FFC 是有影响的,主要表现在以下几点:
1. float、clear 和 vertical-align 属性在伸缩项目上没有效果。
2. 伸缩容器的 margin 与其内容的 margin 不会重叠。
3. text-align 属性在伸缩容器上没有效果,因为其只可应用于块级 block 容器。
4. 另外,columns 属性在伸缩容器上没有效果。
弹性盒模型的两种容器:块级伸缩容器和内联伸缩容器。块级伸缩容器是指 `display: flex` 的容器,而内联伸缩容器是指 `display: inline-flex` 的容器。两者的区别类似于 block 和 inline 的区别。
flex 布局提供了很多有用的属性来控制伸缩项目的布局,例如 `justify-content`、`align-items`、`flex-wrap` 等。这些属性可以让开发者轻松地实现各种复杂的布局效果。
CSS 弹性盒模型 flex 是一种强大的布局模型,可以帮助开发者快速实现复杂的布局效果,提高开发效率和页面的用户体验。
2022-11-20 上传
2020-09-24 上传
2009-08-22 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
2024-10-30 上传
weixin_38730389
- 粉丝: 7
- 资源: 915
最新资源
- SSM动力电池数据管理系统源码及数据库详解
- R语言桑基图绘制与SCI图输入文件代码分析
- Linux下Sakagari Hurricane翻译工作:cpktools的使用教程
- prettybench: 让 Go 基准测试结果更易读
- Python官方文档查询库,提升开发效率与时间节约
- 基于Django的Python就业系统毕设源码
- 高并发下的SpringBoot与Nginx+Redis会话共享解决方案
- 构建问答游戏:Node.js与Express.js实战教程
- MATLAB在旅行商问题中的应用与优化方法研究
- OMAPL138 DSP平台UPP接口编程实践
- 杰克逊维尔非营利地基工程的VMS项目介绍
- 宠物猫企业网站模板PHP源码下载
- 52简易计算器源码解析与下载指南
- 探索Node.js v6.2.1 - 事件驱动的高性能Web服务器环境
- 找回WinSCP密码的神器:winscppasswd工具介绍
- xctools:解析Xcode命令行工具输出的Ruby库