flex详解

2022-07-25 15:04:55 阅读：188 来源： 互联网

1. flex:1什么意思？

　　- flex：1实际代表的是三个属性的简写

2. flex-grow：1

　　- flex-grow是用来增大盒子的，如果父级的盒子大于自己的盒子的时候，父盒子剩余空间就利用flex-grow来设置分配子盒子增大的比例

    .box div:nth-child(1) {
      flex-grow: 1;
    }

    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }

　　- 父盒子宽度为500，子盒子宽度为300，剩余200的宽度

第一个盒子扩大1/5，100+40 = 140
第二个盒子扩大3/5，100+120=220
第三个盒子扩大1/5，100+40= 140

3. flex-shrink：1

　　- 是来设置子盒子缩小的比例，当子盒子大小超过父级盒子的时候就可以添加flex-shrink来设置子盒子缩小的比例

- 父盒子宽度为500，子盒子宽度为600，剩余200的宽度

第一个盒子：1/4 * 100 = 25 最终第一个盒子200-25=175

第二个盒子：2/4 * 100 = 50 最终第二个盒子200-50 = 150

第三个盒子：1/4 * 100 = 25 最终第一个盒子200-25=175

4. flex-basis：0%

　　设置盒子宽度的标准，并且basis和width同时存在的话flex-basis会把width的宽度给干掉

标签：flex,盒子,200,宽度,100,grow,详解
来源： https://www.cnblogs.com/xuanxuanbaby/p/16517338.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flex详解