flex属性取值
来源:互联网 发布:网络主播歌曲 编辑:程序博客网 时间:2024/06/04 17:44
第一种情况flex属性不写
flex属性默认是0 1 auto
flex-grow为0,则存在剩余空间也不放大
flex-shrink为1,则空间不足该项目缩小
flex-basis为auto,则该项目本来的大小
原始代码:
<style> .parent { display: flex; width: 600px; background-color: currentColor; } .parent > div { height: 100px; } .item-1 { width: 100px; background: blue; } .item-2 { width: 100px; background: green; }</style><div class="parent"> <div class="item-1"></div> <div class="item-2"></div></div>
效果图:
第二种情况其中一个元素flex属性为一个非负数字
flex:1相当于
flex-grow为1
flex-shrink为1
flex-basis为0%
这里的计算过程是这样的:
由于item-1什么都没设,所以flex-basis为auto保持原来的大小即100px
item-2设置了flex:1,因为它的flex-basis为0%
所以剩余空间为:600 - 100 - 0% = 500px
因为item-2的flex-grow为1,所以这500px全部分配给item-2,所以item-2就为500px
第三种情况两个元素flex属性都为一个非负数字
它们将均分剩余空间,即各占300px
第四种情况flex-basis为一个固定数字
item-1为 flex: 1 1 100px;
item-2为 flex: 1 1 200px;
计算过程:
剩余空间为:600 - 100 - 200 = 300px
因为它们的flex-grow为1,所以剩余空间的就平均分配,即每项150px
在这里flex-basis设为固定值,相当于元素大小就为这个值
所以item-1为 100 + 150 = 250px
item-2为 200 + 150 = 350px
0 0
- flex属性取值
- flex取一个对象的所有属性
- Flex Nunber 四舍五入取值
- enctype 属性取值
- CSS属性取值
- 根据属性取值
- Flex中取DataGrid里的值
- 伸缩布局flex取值的区别
- Cascade属性的取值
- css position属性取值
- --------CSS 属性取值(news)--------
- Cascade属性的取值
- html 属性 lang取值
- 反射 取model值/属性
- Flex 属性
- flex取整运算
- Flex 遍历对象的属性和值
- Flex布局,常用的几个属性值;
- Github上传和获取
- RecyclerView的使用
- 10-17
- 查询/过滤coredata
- 搭建双塔
- flex属性取值
- 图像去卷积(二)——Richardson–Lucy算法
- 并行接口SRAM存储器接口不一定需要?
- Maven问题总结
- 二分图染色模板
- Metrics and trace
- YYF的一些简单配置 2016-10-13
- nodeJs之模块
- wamp中使用命令行导出sql