- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS flex属性用法是什么，有什么要注意的
CSS flex属性用法是什么，有什么要注意的
Admin 2022-10-31 群英技术资讯 1471 次浏览
这篇文章主要讲解了“CSS flex属性用法是什么，有什么要注意的”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。CSS样式中flex属性的用法是什么
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
语法如下：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
属性值如下：
-
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
-
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
-
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
-
auto 与 1 1 auto 相同。
-
none 与 0 0 auto 相同。
-
initial 设置该属性为它的默认值，即为 0 1 auto。
-
inherit 从父元素继承该属性。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<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>
<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
</body>
</html>
输出结果：
感谢各位的阅读，以上就是“CSS flex属性用法是什么，有什么要注意的”的内容了，经过本文的学习后，相信大家对CSS flex属性用法是什么，有什么要注意的都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS中vw与vh属性是什么意思，有何区别吗？
这篇文章我们来了解CSS中的两个属性，vw与vh属性，有一些新手对vw与vh属性是什么意思，以及它们的区别不是很清楚，因此本文就给大家来介绍一下，下文有详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！
-
HTML5中表单required属性怎么定义，用法是怎样
本文将结合实例代码，介绍html5表单的required属性使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
-
Canvas中图片镜像翻转怎么操作，有多少方法
这篇文章主要介绍了canvas实现图片镜像翻转的2种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
css怎样写列表展开与收起效果？
如何css实现列表展开与收起？下图效果想必大家都有看到过，列表的展开与收起效果在网站设计中还是比较常见的，那么种效果是如何实现的呢？下面我们就来一起学习一下。
-
css简写属性有什么用？需要注意哪些？
css简写属性有什么用？简写属性是用于同时给多个属性赋值的属性，但是css简写属性有两点问题是需要注意的，就是简写属性会默默覆盖其他样式及简写值的顺序，接下来我们详细的了解看看。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
