理解CSS弹性盒模型flex
来源:互联网 发布:java web 报表 开源 编辑:程序博客网 时间:2024/05/24 07:01
前面的话
CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕
版本更迭
flexbox布局的语法规范经过几年发生了很大的变化。从2007年07月,flex第一版本的工作草案发布,到2012年09月,flex最新版本成为候选推荐。flex主要经历了三个版本
【1】旧版本 display:box | inline-box;
IE浏览器不支持,windows下的safari浏览器只支持旧版本的写法且需要添加前缀,移动端可以兼容到andriod2.1-4.3和ios3.2-6.1也需要添加前缀
【2】混合版本 display:flexbox | inline-flexbox;
该版本只有IE10支持,且需要添加前缀-ms-
【3】新版本 display: flex | inline-flex
该版本兼容IE11+、firefox、safari、chrome、opera及移动端,但移动端ios7.1-8.4需要添加前缀-webkit-
display
要让一个元素变成伸缩容器,需要使用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]另外,conlumns属性伸缩容器上没有效果
弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别,一个独占一行,另一个非独占一行
//弹性盒模型: 块级伸缩容器 | 内联伸缩容器//新版本display: flex | inline-flex;//混合版本display: flexbox | inline-flexbox;//旧版本display: box | inline-box;
- 理解CSS弹性盒模型flex
- 深入理解CSS弹性盒模型flex
- 深入理解CSS弹性盒模型flex
- css弹性盒模型:flex
- CSS中flex布局 弹性盒模型
- CSS弹性盒子模型Flex
- Flex弹性盒模型
- Flex弹性盒模型
- Flex弹性盒模型
- 浅谈CSS属性之布局--flex布局<弹性盒模型>
- css-弹性盒模型
- 弹性盒模型 Flex 布局
- CSS-弹性盒模型布局
- box flex 弹性盒模型(转载)
- Flex弹性盒模型初尝试
- CSS3弹性盒模型之box-flex
- flex布局(弹性盒模型)知识点
- CSS3--弹性盒模型(display:flex)
- 从开始做设计到现在的感想
- 生成json数据
- java 结合jQuery实现跨域名获取数据
- 英文和数字组合 正则 密码验证
- Mybatis like 查询 防止SQL注入方法相关原理和解决方法整理
- 理解CSS弹性盒模型flex
- TextView使用SpannableString设置复合文本
- 如何阅读一本书笔记之1阅读的层次、目的
- meshgrid
- start.S解析3
- 新版飞机大战游戏安卓源码项目
- 20个经典的正则表达式
- Stirling数-组合数学
- 工信部《VR产业白皮书》全文 14000字的官方解读