flex: 1的写法

Web前端评论143阅读模式

代码示例:

<div class="container">
	<div class="div">我是一个div</div>
	<div class="div">我是一个很多字div</div>
	<div class="div">我是一个更多字而且第三个div</div>
</div>
 
.container {
	display: flex;
}
.div {
	border: 1px solid red;
	flex: 1; 
}

参数:

第一个参数是flex-grow,定义了项目的放大比例,默认是0

第二个参数是flex-shink,定义了项目的缩小比例,默认是1

第三个参数是flex-basis,给上边两属性分配剩余空间时,计算项目是否有多余空间,默认是auto

flex常见使用方法:

flex: none; 等价于flex: 0 0 auto;

flex: auto; 等价于flex: 1 1 auto;

flex: 1;    等价于flex: 1 1 0%;  值为非负数字,该值设置的是flex-grow。

flex: 1 0;  等价于flex: 1 0 0%;  相当于设置的flex-grow和flex-shink,flex-basis的值为初始值。

flex: 1 20%;等价于flex: 1 1 20%; 值为一个数字和一个长度或百分比时,设置的是flex-grow和flex-basis,flex-shink的值为初始值。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
  • CSS
  • Web前端
  • flex
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证