前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » CSS3 Flex学习

CSS3 Flex学习

发布者:前端集合 // 发布时间:2013-09-13 20:44:41 // 分类:前端集合 // 访问: 2,139 次 // 热度: 0人参与

CSS3的Flex属性是一个非常有用的布局方式.

一. 它的作用

如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;

可以快速让他们布局在一列;

可以方便让他们对齐容器的左、右、中间等;

无需修改结构就可以改变他们的显示顺序;

如果元素容器设置百分比和视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

二. 它的写法

如果你看的博客/书中关于Flexbox的代码是: display:box; 或者属性是 box-{*},那你看的是2009年以前的版本;

如果你看的博客/书中关于Flexbox的代码是: display:flexbox; 或者 flex() 函数,那你看到的是2011年的青涩少年;

如果你看的博客/书中关于Flexbox的代码是: display:flex; 并且属性是 flex-{*} 那你看到的是现在(2012-2013年)的版本。

Quick hits with the Flexible Box Model (这篇文章写得早, 最新的Flex写法已经不是这样, 但是代码还是具有参考意义的)

三. 新旧语法对比

Final syntax 2009 syntax 2011 hybrid syntax
display: flex display: box display: flexbox
flex-direction: row box-orient: horizontal box-orient: horizontal
justify-content: flex-start box-pack: start box-pack: start
align-items: flex-start box-align: start box-align: start
flex: 1 box-flex: 1 flex: 1

四. 它的兼容性

1. 所有Firefox 22-25都只是部分支持这个属性;

2. Chrome 28以上都能很好的支持;

3. IE 10部分支持, IE 11支持;

4. 更多浏览器兼容性看Can I Use.

参考资料:

Flexbox——快速布局神器

Flexbox的奇怪历史

Advanced cross-browser flexbox

Tags: 前端, css3, box, flex, flexbox, flex布局

用回钢笔>>  << 未知高度div垂直居中的改进版本
Top