美文网首页
CSS3-可伸缩框属性(Flexible Box)

CSS3-可伸缩框属性(Flexible Box)

作者: 云端漫步的太阳 | 来源:发表于2017-06-04 13:23 被阅读106次

可伸缩框属性(Flexible Box)

CSS3的属性,注意的是很多浏览器不支持直接的写法,需要加上前缀来书写,但功能确实很强大。
部分素材词解来自: w3school

属性 描述 CSS
box-align 规定如何对齐框的子元素。 3
box-direction 规定框的子元素的显示方向。 3
box-flex 规定框的子元素是否可伸缩。 3
box-flex-group 将可伸缩元素分配到柔性分组。 3
box-lines 规定当超出父元素框的空间时,是否换行显示。 3
box-ordinal-group 规定框的子元素的显示次序。 3
box-orient 规定框的子元素是否应水平或垂直排列。 3
box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。 3

举例

box-align

通过使用 box-align and box-pack 属性,居中 div 框的子元素:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

浏览器支持
目前没有浏览器支持 box-align 属性。
Firefox 支持替代的 -moz-box-align 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。


TODO:编辑中ing 2017年06月04日13:23:17

推荐阅读


点赞、关注、加转发!


点赞的人发福利

未经许可禁止转载,分享到朋友圈才是义举。(转载联系作者)

相关文章

网友评论

      本文标题:CSS3-可伸缩框属性(Flexible Box)

      本文链接:https://www.haomeiwen.com/subject/ecvvfxtx.html