flex
中的各个参数
- flex-grow 属性定义项目的放大比例 默认为0 即如果存在剩余空间 也不放大
- flex-shrink 属性定义了项目的缩小比例 默认为1 即如果空间不足 该项目将缩小
flex-basis 属性定义了在分配多余空间之前 项目占据的主轴空间(相当于我们设置的width)
默认值为: flex:0 1 auto;(默认不放大 放不下了缩小 优先采用自己本身宽度)
flex: 1
flex: 1 1 0%; 有剩余空间就放大,空间不够就缩小,项目长度为0
<div class="wrap">
<div class="box">养乐多</div>
<div class="box">不,是羊乐多多多多</div>
<div class="box">羊乐多多多多喝养乐多</div>
</div>
.wrap{
height: 100px;
display: flex;
}
.box{
border: 2px solid yellowgreen;
flex: 1;
}
flex: auto
flex: 1 1 auto;有剩余空间就放大,空间不够就缩小,项目长度为原本的长度
<div class="wrap">
<div class="box">养乐多</div>
<div class="box">不,是羊乐多多多多</div>
<div class="box">羊乐多多多多喝养乐多</div>
</div>
.wrap{
height: 100px;
display: flex;
}
.box{
border: 2px solid yellowgreen;
flex: auto;
}
所以得出结论 ~
flex:1
和 flex:auto
的区别主要是在于 flex-basis
flex:1
不管内容多少,一般都是平分空间,空间大小都一致
而 flex:auto
是根据内容的大小来分,不是平的(除非内容都是一样,才平分)
————————————————
版权声明:本文为CSDN博主「羊乐多多多多」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Y_9906/article/details/128647208
推荐阅读文章
https://blog.csdn.net/weixin_39808181/article/details/114102051
3 条评论
《旺达塞克丝:不正常》喜剧片高清在线免费观看:https://www.jgz518.com/xingkong/7737.html
《刺客学苑电影版》喜剧片高清在线免费观看:https://www.jgz518.com/xingkong/79316.html
博主真是太厉害了!!!