码迷,mamicode.com
首页 > 其他好文 > 详细

flex 1与flex auto

时间:2019-03-15 19:04:12      阅读:1258      评论:0      收藏:0      [点我收藏+]

标签:宽度   代码   技术   .com   flex   img   lex   png   info   

flex意为"弹性布局"

这次主要探究的是flex:1与flex:auto的区别,flex是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto

首先上代码:

技术图片

上面为flex的基础布局,效果如下:

技术图片

下来看看:flex:1的效果:

 技术图片

技术图片

再下来看看flex:auto的效果:

技术图片

技术图片

基本已经明白了:

flex:1相当于 flex-grow:1flex-shrink:1 , flex-basis:0% (子元素宽度 = 父级宽度/3)

flex:auto相当于flex-grow:1flex-shrink:1 , flex-basis:auto (子元素宽度 = 子元素宽度 +(父级宽度-子元素宽度之和/3)

flex:none相当于flex-grow:0flex-shrink:0 , flex-basis:auto

 

flex 1与flex auto

标签:宽度   代码   技术   .com   flex   img   lex   png   info   

原文地址:https://www.cnblogs.com/tylz/p/10538796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!