CSS box-flex 属性_CSS学习

资料来源：网络整理时间：2023/3/4 1:23:09 共计：3640 浏览

实例

定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素：

#p1
{
-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari 和 Chrome */box-flex:2.0;
border:1px solid blue;
}

浏览器支持

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

定义和用法

box-flex 属性规定框的子元素是否可伸缩其尺寸。

提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

默认值：	0.0（指示该元素不可伸缩）
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxFlex=2.0

语法

box-flex: value;

值	描述
value	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：flex 布局的概念_CSS学习 | ·下一条：Flex 布局语法教程_CSS学习