这篇文章主要介绍了flex是不是css属性,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
flex是css属性。css flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性,用于设置或检索弹性盒模型对象的子元素如何分配空间;如果元素不是弹性盒模型对象的子元素,则flex属性不起作用。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
flex是css属性。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性,默认值为0 1 auto
。
该属性有两个快捷值:auto (1 1 auto)
和 none (0 0 auto)
。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。
语法:
flex: flex-grow flex-shrink flex-basis|auto;
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
</html>
感谢你能够认真阅读完这篇文章,希望小编分享的“flex是不是css属性”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。