CSS3 box-flex 属性

2024-06-07 04:11:46

CSS3 box-flex 属性

实例

定义两个灵活的p元素。如果父级box的总宽度为300px，＃P1将有一个100px的宽度，＃P2将有一个200px的宽度：

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}

尝试一下 »

浏览器支持

目前主流浏览器不支持 box-flex 属性。

Internet Explorer 10 通过私有属性 the -ms-flex 支持.

Firefox通过私有属性 -moz-box-flex 支持.

Safari和Chrome通过私有属性 -webkit-box-flex 支持.

注意： Internet Explorer 9及更早IE版本不支持弹性框.

属性定义及使用说明

box-flex属性指定box的子元素是否灵活或固定的大小。

提示: 随着box收缩和增长，元素是否灵活的收缩或增长。每当有额外的空间，在box里，元素灵活的扩大来填补这一空间。

默认值:	0.0(表示该元素是不灵活的)
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxFlex=2.0

语法

box-flex: value;

值	描述
value	元素的灵活性。所有Flex都是相对的

CSS3 box-flex 属性相关推荐

CSS3 box flex 布局
1.伸缩项目的布局方式-从左到右 <ul id="Layout1" class="box"><li>1</li><li ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
用css3的flex好久了,虽然用的没问题,但还是很纠结,其他属性大都明白,但是flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的聊天,总算是明白了. 网上大 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
CSS3单词及属性大全
CSS3属性大全 0~9text:文本; /**/decoration:装饰,修饰; /**/none:没有,无,没有东西地; /**/list:列表; /**/style:样式; /**/persp ...
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis
用css3的flex好久了,虽然用的没问题,但还是很纠结,其他属性大都明白,但是flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的资料,总算是明白了. 网上大 ...
css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

最新文章

热门文章