Webkit Flex伸缩盒模型

转载 2015年11月19日 11:31:07


CSS3 display:flex和display:box有什么区别?

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:一丝
链接:http://www.zhihu.com/question/22991944/answer/23302749
来源:知乎

前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。

后者是2009年的语法,已经过时,是需要加上对应前缀的。

所以兼容性的代码,大致如下

    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目。 flex是一个复合属性。Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义。 由多个伸缩项目组成其具体的布局方式。 是为了呈现复杂的应用与页面而设计出来的。

display: -webkit-flex; 

-webkit-flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto

none 在任何情况都不会发生伸缩
flex-grow 扩展比率
flex-shrink 收缩比率
flex-basis 伸缩基准值
initial 在有剩余空间的情况下不会有任何变化,但是在必要的情况下会被收缩
auto 会根据主轴自动伸缩以占用所有剩余空间,非常类似于普通流中的自动外边距

示例:

CSS

1 .flexBox{ display:-webkit-flex;-webkit-flex-flow: row;-webkit-flex-wrap: nowrap; width:600px; margin:50px auto; background-color:#9CF}
2 .flexBox div{ height:100px;}
3 .flexBox .item1{-webkit-flex:1;background:#ff9900;}
4 .flexBox .item2{-webkit-flex:1;background:#936;}
5 .flexBox .item3{-webkit-flex:1;background:#39C;}

HTML:

1 <div class="flexBox">
2  <div class="item1">1</div>
3  <div class="item2">2</div>
4  <div class="item3">3</div>
5  <div style=" width:300px; background-color:#96F">固定宽度300px</div>
6 </div>

结果:

总宽度,600px,给子元素4定义了width:300px,子元素1、2、3定义了flex伸缩属性,那么剩余空间就会按照1:1:1分割给这三个子元素

-webkit-flex-basis: 用来设置「flex-basis」长度并指定伸缩基准值,也就是根据可伸缩比率计算出剩余空间的分布之前,伸缩项目主轴长度的起始数值,若在「flex」缩写省略了此部件,则「flex-basis」的指定值是长度零。 若「flex-basis」的指定值是「auto」,则伸缩基准值的指定值是元素主轴长度属性的值。(这个值可能是关键字「auto」,代表元素的长度取决于其内容。)

有点绕,即是说对子元素设置了-webkit-flex-basis基准值,在计算剩余空间前,该项在基准值上进行伸缩,例如

<div class="flexBox">
 <div class="item1" style="-webkit-flex-basis:150px;">1</div>
 <div class="item2">2</div>
 <div class="item3">3</div>
 <div style=" width:300px; background-color:#96F">固定宽度300px</div>
</div>

CSS同上面的例子,仅仅修改了HTML的第一个子元素,为这个子元素添加了一个样式属性-webkit-flex-basis:150px;,设置第一个元素的基准值为150px,结果如下:

未设基准值以前,1、2、3 三个元素的长度都是200px,也就是容器总宽度600px减去固定宽度300px后剩余300xp再1:1:1进行伸缩的结果。

设置第一个子元素-webkit-flex-basis:150px;后,1、2、3三个元素的宽度分别为:200px、50px、50px。

个人理解在计算出剩余空间300px后,先算出每个元素的伸缩基准值(不写默认为0px),剩余空间减去每个元素的伸缩基准值后的空间再按比例进行分配,所以上面的结果是

300px-150px=150px,这150px按照1:1:1分配应该给1、2、3号元素各分50px,由于1号子元素的基准值是150px,所以1号元素的宽度为150+50=200px,2、3号元素为50+0=50px.

如果给元素设置了width属性,-webkit-flex-basis的值就是width值

-webkit-flex-direction :row(子元素优先排成一行)|row-reverse(反转)|column(子元素优先排成多行,每行排列一个)|column-reverse(反转)

具体实例地址:http://ued.ctrip.com/blog/wp-content/webkitcss/demo/flex-direction.html

-webkit-flex-grow :指定扩展比率,也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。若省略了此部件,则它会被设为「1」,如果设置为0,则该元素将不会参与空间分配,必须加上auto参数(-webkit-flex:0 auto;),其宽度依据内容而定,如果不加auto参数,宽度将会是0px,导致内容不可见。

-webkit-flex-shrink :指定收缩比率,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。若省略了此部件,则它会被设为「1」。在收缩的时候收缩比率会以伸缩基准值加权。

收缩示例:

CSS/HTML:

 1 .flexBox{ display:-webkit-flex;-webkit-flex-flow: row;-webkit-flex-wrap: nowrap; width:600px; margin:50px auto; background-color:#9CF}
 2 .flexBox div{ height:100px; width:150px}
 3 .flexBox .item1{background:#ff9900;}
 4 .flexBox .item2{background:#936;}
 5 .flexBox .item3{background:#39C;}
 6 
 7 <div class="flexBox">
 8  <div class="item1">1</div>
 9  <div class="item2">2</div>
10  <div class="item3">3</div>
11  <div style=" width:300px; background-color:#96F">固定宽度300px</div>
12 </div>

结果:

初始设定1、2、3号元素的宽度为150px,4号元素宽度为300px。而实际1、2、3、4号元素的宽度分别是120px、120px、120px、240px。这是伸缩盒缩的结果。

容器总宽度为600px,如果按照实际,4个子元素的总宽度应该为750px,所以容器应该差150px才能满足要求,而容器宽度不会自动增大,为了满足现实,就必须缩小每个子元素的宽度。

由于未设-webkit-flex-basis基准值,所以每一个子元素的基准值就是它的宽度,所以1、2、3、4的基准值分别为150px,150px,150px和300px;。

在收缩的时候收缩比率会以伸缩基准值加权,初始收缩比率是1:1:1:1,由于4号元素的基准值是300px,所以收缩率要加权,结果300/150=2,所以它们的收缩比率分别为1:1:1:2。

计算收缩宽度为(差值*比率)1:150*1/5=30px、2:150*1/5=30px、3:150*1/5=30px、4:150*2/5=60px;

四个元素的宽度分别为150-30=120、150-30=120、150-30=120、300-60=240。

-webkit-flex-wrap :控制伸缩容器是单行还是多行,也决定了侧轴方向 ― 新的一行的排列方向

nowrap 伸缩容器为单行。侧轴起点方向等同于当前书写模式的起点或前/头在侧轴的那一边,而侧轴终点方向是侧轴起点的相反方向
wrap 伸缩容器可以创建多行,新增的伸缩行根据侧轴的方向添加
wrap-reverse 除了侧轴起点与侧轴终点方向交换以外同「wrap」

示例地址:http://ued.ctrip.com/blog/wp-content/webkitcss/demo/flex-wrap.html

在属性设置为wrap时,容器会自动判断子元素的宽度决定是否换行,可以给子元素设置min-width或width属性配合使用。

接着上一个例子收缩来说,如果设定了子元素宽度而又不愿意收缩,可以设置-webkit-flex-wrap:wrap

结果为:

1、2、3、4号元素宽度就是实际的值150、150、150、300px。一行排不下时自动换行,由于未设置-webkit-flex属性,所以不会自动拉伸。

-webkit-align-content :基于Flex布局,用来指定多行伸缩容器的对齐。在使用 wrap 关键字的多行伸缩容器上,你也可以指定行与行之间空白的分配方法。仅在伸缩容器在侧轴占有固定的空间时(例:伸缩子元素横排的时候伸缩容器有固定高)才有作用

flex-start 将伸缩行捆在主轴起始端,将空白留到结尾端
flex-end 将伸缩行捆在主轴结尾端,将空白留到起始端
center 将伸缩行捆在主轴的中间位置,将空白平均分到两端
stretch 将所有项目伸长,让项目占据了整个侧轴的长度
space-around 沿着侧轴将空白均分到伸缩行之间与外侧(行之间空白的二分之一)
space-between 跟 space-around 的效果很相像,但是分配到开始、结尾两端的空间比较少

基于上一个例子,设置容器属性<div class="flexBox" style="-webkit-flex-wrap:wrap; height:300px;-webkit-align-content:space-between ">,给一个固定的高度。

flex-start:                             flex-end:                            center:                                space-around:                      space-between:

flex-startcenter


-webkit-box 与 -webkit-flex 的差异

-webkit-box  应该是 -webkit-flex 的旧写法 使用-webkit-box 的时候   -webkit-flex-wrap 属性不生效,必须使用-webkit-flex ...
  • ISaiSai
  • ISaiSai
  • 2015年11月30日 11:39
  • 12891

-webkit-flex 属性

-webkit-flex 属性 一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目。 flex是一个复合属性。Flexbox伸缩...

CSS3弹性伸缩布局盒(Flexible Box)模型

主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型!除此之外,还有更头疼的是浏览器兼容性,需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。...
  • macanfa
  • macanfa
  • 2016年07月06日 19:48
  • 3430

【CSS3】-伸缩布局盒模型实现 3列等高布局

CSS3引入了Flexbox盒模型

html通过css来设置半透明背景

Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法。 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的...
  • jumtre
  • jumtre
  • 2016年03月02日 22:27
  • 23493

CSS3 flex 伸缩布局盒模型

CSS3引入一种新的布局模式-flexbox布局 1. 优点:flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,可以调节伸缩项目的相对大小和位置。非常适用于排列方向改变,缩放与收缩用...

css3学习笔记(一):伸缩布局盒模型flexbox

Flexbox模型基础知识      Flexbox布局对于设计设计较复杂的页面非常有用,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。同时减少了依赖于浮动布局实现元素位...

伸缩盒模型flexbox

伸缩(弹性)盒模型flexbox:决定一个盒子在其他盒子中的分布以及如何处理可用的空间,使用该 模型可以创建“自适应”浏览器窗口的流动布局,可以规定特定的顺序,开启只需要设置display属 性值...

图解CSS3核心技术与案例分析(第八章CSS3伸缩布局盒模型)

1、CSS3引入一种新的布局模式—-Flexbox布局(伸缩布局盒模型) 主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型...

css伸缩布局盒flex属性 display:flex 详解

css伸缩布局盒伸缩布局盒由伸缩容器和伸缩项目组成,首先我们创建一个伸缩容器:.flex-container { display: -webkit-flex; display: flex; }...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Webkit Flex伸缩盒模型
举报原因:
原因补充:

(最多只允许输入30个字)