css3 box-flex属性设置box子元素的大小

原创 国哥笔记  2019-01-05 19:14  阅读 454 views 次

box-flex属性定义及用法

box-flex属性是css3新增属性,是使用来指定box的子元素是否灵活或固定的大小,通常用来设置box子元素的大小。

目前主流浏览器都还不支持box-flex属性,都需要在该属性前加对应的前缀才支持。Internet Explorer 10浏览器的box-flex属性是-ms-flex,Internet Explorer 10之前版本不支持该弹性盒子属性;Firefox内核的浏览器的box-flex属性是-moz-box-flex;Safari和Chrome内核的浏览器的box-flex属性是 -webkit-box-flex;

box-flex属性语法格式

box-flex: value;

属性值说明

  • value:元素的灵活性,所有Flex都是相对的;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-flex属性设置box子元素的大小</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 80px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
}
#p1,#p3{
box-flex:1.0;
-ms-flex:1.0; /* Internet Explorer 10 */
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
border:1px solid darkgoldenrod;
}
#p2{
box-flex:4.0;
-ms-flex:4.0; /* Internet Explorer 10 */
-moz-box-flex:4.0; /* Firefox */
-webkit-box-flex:4.0; /* Safari and Chrome */
border:1px solid darkgoldenrod;
}
</style>
</head>
<body>
<div class="box1"><p id="p1">box-flex:1.0;</p><p id="p2">box-flex:4.0;</p><p id="p3">box-flex:1.0;</p></div>
</body>
</html>

运行结果:

css3 box-flex属性设置box子元素的大小

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-box-flex.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情