css中flexbox伸缩盒深入理解

《css中flexbox伸缩盒深入理解》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、★精品文档★css3中flexbox伸缩盒深入理解　　这个背后有一个悲伤的故事，所以就取了个这么有点像标题党的标题，具体什么我就不说了。很早之前就知道css3里面有这么个东西，而且随着规范的改变，它的版本也改了几次。也就是因为这个flexbox伸缩盒布局太强大了，以至于我没在意它也是display的一个属性。要想解决这个布局问题，我们还是先了解一些基础的问题。先回顾下display有哪些属性吧：none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline：指定对象为内联元素。block：指定对象为块元

2、素。list-item：指定对象为列表项目。inline-block：指定对象为内联块元素。（CSS2）table：指定对象作为块元素级的表格。类同于html标签<table（CSS2）inline-table：指定对象作为内联元素级的表格。类同于html标签<table（CSS2）table-caption：指定对象作为表格标题。类同于html标签<caption（CSS2）ta2016全新精品资料-全新公文范文-全程指导写作–独家原创15/15★精品文档★ble-cell：指定对象作为表格单元格。类同于html标签<td（C

3、SS2）table-row：指定对象作为表格行。类同于html标签<tr（CSS2）table-row-group：指定对象作为表格行组。类同于html标签<tbody（CSS2）table-column：指定对象作为表格列。类同于html标签<col（CSS2）table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup（CSS2）table-header-group：指定对象作为表格标题组。类同于html标签<thead（CSS2）table-footer-group：指定对象作

4、为表格脚注组。类同于html标签<tfoot（CSS2）run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）2016全新精品资料-全新公文范文-全程指导写作–独家原创15/15★精品文档★inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）flex：将对象作为弹性伸缩盒显

5、示。（伸缩盒最新版本）（CSS3）inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）可以看到，目前最新的版本是display:flex;当然要是用以前过度版本的估计还有用，但我们还是跟着最新的规范来。我们再了解下伸缩盒的定义和一些概念的东西吧：Flexbox(伸缩布局盒)是CSS3中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。虽然现在我们可以使用Flexbox轻松创建布局，而不会像以前那样难以理解，但我们仍然需要花一些时间去熟悉到底如何使用Flexbox。新的术语和概念可能会是我们使用Flexbox时

6、的一个障碍，所以让我们先来了解以下它们。Flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。Flexbox规范的相关工作已经进展了3年。不同的浏览器也实现了不同的实验版本。在2012年9月，Flexbox语法的第三个主要修订版本进入到候选推荐阶段。这意味着2016全新精品资料-全新公文范文-全程指导写作–独家原创15/15★精品文档★W3C认为当前的语法是稳定的，并鼓励浏览器开发

7、商去实现它。总之，伸缩盒布局，是我见过的最操蛋的规范，从2009发布到去年最终定下来，更弦换辙了三次。Flexbox规范时间表：2009年7月工作草案(display:box;)2011年3月工作草案(display:flexbox;)2011年11月工作草案(display:flexbox;)2012年3月工作草案(display:flexbox;)2012年6月工作草案(display:flex;)2012年9月候选推荐(display:flex;)Flexbox已经被浏览器快速支持。Chrome22+,Opera12.1+,和OperaMobil

8、e12.1+已经支持了本文中所描述的Flexbox。Firefox18和Blackberry1