IE10中的Flexible Box("Flexbox")布局

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

经过这一系列对Flexbox的介绍,我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来,虽然Flexbox功能强大(特别是弹性布局),但还是很多同学不敢使用,也不想尝试性使用。我想主要原因出于他的语法版本众多,浏览器对其兼容性等。

在《“老”的Flexbox和“新”的Flexbox》一文中,让我们了解了如何识别Flexbox的语法版本,而在《使用Flexbox:新旧语法混用实现最佳浏览器兼容》和《跨浏览器的Flexbox》能实现浏览器的完美兼容性。

Flexbox Layout模块的兼容图:

IE10中的Flexible Box(

既然有方案能让Flexbox布局模块在众多浏览器下实现兼容,那我们今天要说什么呢?从浏览器的兼容性中可以看出,Flexbox布局模块的最新语法“display:flex”在Chrom25.0+、Opera12.1,Firefox22+、IE11+都得到了支持,但我们还有很多用户并不像我们这些前端人员会及时更新自己所用浏览器的版本。那么就存在Flexbox的兼容性问题。说了一大堆的废话,还未进来主题,真有点对不住读者,接下来也不浪费大家宝贵时间,我们一起进入今天的主题——IE10中的Flexible Box("Flexbox")布局

回忆Flexbox布局的功能

前面的教程也提到过Flexbox布局用于设计比较复杂的页面非常有用。可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。简单点来说,Flexbox实现在不需要媒体查询的情况之下,能很好的实现响应式的布局。(有关于Flexbox实现响应布局,大家可以参考一下《响应式设计的未来——Flexbox》一文)。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。例如,你可以确保伸缩容器中的多余空音平均分配给多个伸缩项目,当然如果你的伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减小伸缩项目的大小,使其不溢出伸缩容器。

综合而言,Flexbox布局功能主要具有以下几点:

  1. 屏幕和浏览器窗口大小发生改变也可以灵活调整布局;
  2. 可以指定伸缩项目沿着主轴或侧轴按比例分配多余空间(伸缩容器多余空间),从而调整伸缩项目的大小;
  3. 可以指定伸缩项目沿着主轴或侧轴将伸缩容器多余空间,分配到伸缩项目之前、之后或之间;
  4. 可以指定如何将垂直于元素布局轴的多余空间分布到该元素的周围;
  5. 可以控制元素在页面上的布局方向;
  6. 可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

Flexbox布局的语法版本

Flexbox布局的语法经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法版本众多,浏览器支持不一致,致使Flexbox布局使用不多。从前面的教程中我们可以得知,Flexbox布局主要有三种语法版本:

  1. 2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;
  2. 2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;
  3. 2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。

如何区别这些版本?又如何获取对应版本的相关知识,大家可以简单的浏览一下《“老”的Flexbox和“新”的Flexbox》一文。

在了解了Flexbox布局版本的历史发展之后,我们今天要介绍的IE10中的Flexbox布局所使用的语法就是介于2009年老版本和2013年新版本之间的混合版本——flexbox(display:flexbox或display:inline-flexbox)。

Flexbox的相关述语

前面有关于Flexbox系列教程主要是针对于Flexbox布局的最新语法相关的介绍,交没有深入的介绍Flexbox混合语法的使用与细节。今天我们就要针对于IE10中实现Flexbox布局,一起来了解Flexbox的混合语法的使用与细节。

伸缩容器

要使用Flexbox布局,必须需要先创建一个伸缩容器。创建伸缩容器的方法非常简单,只需要将元素显示的设置为:

.element{
  display:-ms-flexbox;	/*设置块级Flexbox容器*/
}  

或者:

.element{
  display:-ms-inline-flexbox;/*设置内联级Flexbox容器*/	
}	

注:因为在本篇教程中主要针对于IE10的Flexbox布局的介绍,因此本文中将只使用IE浏览器的私有属性“-ms-”。因为只有这样,Flexbox布局才能生效。

伸缩项目(flex-items)

一旦给某个元素设置了“display:flexbox”或者“display:inline-flexbox”时,此元素就自动变成了伸缩容器,而这个容器里面的所有子元素就自动的变成了伸缩项目。如:

<div class="flexbox-container">
  <div class="flexbox-items">Box1</div>
  <div class="flexbox-items">Box2</div>
  <div class="flexbox-items">Box3</div>
  <div class="flexbox-items">Box4</div>
  <div class="flexbox-items">Box5</div>
  <div class="flexbox-items">Box6</div>
</div>	

当给“flexbox-container”容器显式的设置了:

/*声明伸缩容器*/
.flexbox-container {
  display: -ms-flexbox;
}	

这个时候容器“div.flexbox-container”就变成了伸缩容器,而这个容器里面的所有子元素“box1”到“box5”都自动的变成了伸缩项目。如下图所示:

IE10中的Flexible Box(

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/ie10-flexbox-layout.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部