CSS3弹性伸缩布局之box布局

2018-12-24 09:03:13来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

CSS3弹性伸缩布局简介

2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局,所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点,让大家对神秘的flex布局熟悉起来。

旧版本(box)

首先看一下浏览器兼容情况:

PS:浏览器兼容数据不一定很准确,不过相差不大。

下面将通过一个简单的实例来讲解旧版本的各个属性:

html代码:

XML/HTML Code复制内容到剪贴板

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS中的class与id区别及用法

下一篇:css文本超出隐藏显示省略号