flex是什么属性的缩写?是flex-grow和flex-shrink和flex-basis
flex布局概念:
父级元素称为:容器(container)
容器的子元素称之为:项目(item)
flex-grow的简单介绍
flex-grow:用于指定弹性元素在可用空间增加时的放大比例。
它决定了弹性元素在可用的父容器中【分配额外空间的比例】。
flex-grow 默认值为 0,表示弹性元素不会放大。
需要注意一下:flex-grow属性的比例计算是相对于其他非零 flex-grow 值的弹性元素而言的。
当容器有可用空间时,flex-grow 具体计算方法如下
1.计算所有弹性元素中,非零flex-grow元素值的和 sum
2.用父容器的空间,减去已经占用的空间(所有子元素占用的空间之和)得到剩余空间。
3.(每个非零flex-grow的值 / 非零flex-grow元素值的和sum) * 剩余空间
flex-grow的使用
<div class="container">
<div class="item box1">Item 1</div>
<div class="item box2">Item 2</div>
<div class="item box3">Item 3</div>
</div>
.container {
display: flex;
width: 600px;
}
.item {
width: 100px;
height: 100px;
}
.box1{
flex-grow: 1;
background-color: red;
}
.box2{
flex-grow: 2;
background-color: blue;
}
.box3{
flex-grow: 3;
background-color: pink;
}
计算方法
1==>非零flex-grow值的总和为1 + 2 + 3 = 6
2==>上面父容器的空间是:600px;每个弹性元素的初始宽度为100px。
剩余空间为 600px - (100px * 3) = 300px。
3==>每个元素分配空间分别为:
box1:(1 / 6) * 300px = 50px
box2:(2 / 6) * 300px = 100px
box3:(3 / 6) * 300px = 150px
因此,最终的宽度分配为
box1: 100px + 50px = 150px
box2: 100px + 100px = 200px
box3: 100px + 150px = 250px
flex-shrink 在子元素上的简单介绍
flex-shrink 属性定义了项目的缩小比例,默认为1。
即如果空间不足,该项目将缩小。
如果在子元素的css样式中添加flex-shrink:0,
那么当前元素就不会被其他子元素挤压(也就是不会被缩放)
flex-basis的简单介绍
flex-basis:用于指定弹性元素在主轴方向上的初始大小。
flex-basis默认值为 auto,表示弹性元素参照自身的 width 或 height;
需要注意,在 flex 布局中:
如果设置弹性元素的 flex-basis: 非auto ,flex-basis的优先级 > width 或 height
也就是说,宽度的总优先级(以 width 举例): max-width > flex-basis > width。
要注意的是,由于flex-basis接受的是长度或百分比值 【提醒】
flex-basis: 0%
flex-basis: 0%; 这定义了项目在主轴上的基础大小。
对于这里,0%意味着项目的【基础大小是其内容的大小】,
除非有其他因素(如其他CSS属性或flex容器的大小)改变了它。
要注意的是,由于flex-basis接受的是长度或百分比值 【提醒】
flex: 1
flex: 1的含义
如果只给1个弹性元素设置,表示该弹性元素占满全部的剩余空间。
如果给所有的弹性元素都设置,表示平分所有的剩余空间。
flex:1 1 0%;
总的来说,flex: 1 1 0%;
这样的设置意味着该项目会尝试占用额外的空间(如果有的话),
并在需要时缩小以适应容器,但其基础大小是其内容的大小。
面试题 flex是什么属性的缩写
flex 是 flex-grow 、 flex-shrink、 flex-basis 的缩写
flex-grow:它决定了弹性元素在可用的父容器中【分配额外空间的比例】
flex-shrink:定义了项目的缩小比例, 0 不缩放,1缩放
flex-basis:用于指定弹性元素在主轴方向上的初始大小。
这3个属性都是子元素上的属性 【提醒】
wrap ==> /ræp/ 读音 ra p ==> 包,换行
grow ==> /ɡrəʊ/ gei no 扩大
shrink /ʃrɪŋk/ shun k 缩水
basis /ˈbeɪ sɪ s/ 基础
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。