css flex属性笔记

原创 国哥笔记  2019-01-18 15:54  阅读 302 views 次

flex属性定义及用法

在css中,flex属性是使用来设置或检索弹性盒模型对象的子元素如何分配空间,是 flex-grow属性、flex-shrink属性和 flex-basis 属性的简写属性。flex属性针对的是弹性盒模型对象的子元素,对于其它元素,flex属性不起任何作用;

一些主流浏览器还不支持flex属性,需要在该属性之前加对应的前缀才能识别该属性。Internet Explorer 9及更早版本不支持flex属性,但是可以通过-ms-flex属性来支持, IE11 及更新版本完全支持flex属性,不再需要-ms-前缀。Safari 6.1 通过-webkit-flex属性来替代flex属性;

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:从父元素继承该属性。请参阅 inherit;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css flex属性笔记</title>
<style type="text/css">
#flex{
width:300px;
height:200px;
border:1px solid black;
display:flex;
}
#flex div{flex:1;}
#flex1{background-color:coral;}
#flex2{background-color:lightblue;}
#flex3{background-color:lightgreen;}
</style>
</head>
<body>
<div id="flex">
  <div id="flex1">红色</div>
  <div id="flex2">蓝色</div>  
  <div id="flex3">带有更多内容的绿色 div</div>
</div>
</body>
</html>

运行结果:

css flex属性笔记

 

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

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

发表评论


表情