详解flex:1什么意思


Posted in HTML / CSS onJuly 23, 2022

简单的来说一下在别人问你这个问题的时候怎么来回答它

前端新人,如有错误求大佬指出~求教?

情景复现

大佬提问:“你知道flex: 1;的更深层次的内容吗?”

详解flex:1什么意思

我的回答:

  • flex:1实际代表的是三个属性的简写
  • flex-grow是用来增大盒子的,比如,当父盒子的宽度大于子盒子的宽度,父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比
  • flex-shrink用来设置子盒子超过父盒子的宽度后,超出部分进行缩小的取值比例
  • flex-basis是用来设置盒子的基准宽度,并且basis和width同时存在basis会把width干掉

所以flex:1;的逻辑就是用flex-basis把width干掉,然后再用flex-grow和flex-shrink增大的增大缩小的缩小,达成最终的效果。

flex-grow:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-grow: 1;
    }
 
    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }
 
 
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子剩余空间的200

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

flex-shrink:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 200px;
    }
 
    .box div:nth-child(1) {
      flex-shrink: 1;
    }
 
    .box div:nth-child(2) {
      flex-shrink: 2;
    }
 
    .box div:nth-child(3) {
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的宽度为500,子盒子的宽度为600,超出100,超出的100,如何进行比例缩放

第一个盒子:1/4 * 100 = 25 最终第一个盒子200-25=175
第二个盒子:2/4 * 100 = 50 最终第二个盒子200-50 = 150
第三个盒子:1/4 * 100 = 25 最终第一个盒子200-25=175

flex-basis:0%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-basis: 50px;
    }
 
    .box div:nth-child(2) {
      flex-basis: 100px;
    }
 
    .box div:nth-child(3) {
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

这样width的宽度就已经被flex-basis:0%干掉了

到此这篇关于详解flex:1什么意思的文章就介绍到这了,更多相关flex:1详解内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 #HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 #HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 #HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 #HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 #HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 #HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 #HTML / CSS
You might like
php的array_multisort()使用方法介绍
2012/05/16 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
基于JavaScript实现选项卡效果
2017/07/21 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
django Serializer序列化使用方法详解
2018/10/16 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
四好少年事迹材料
2014/01/12 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
个人优缺点自我评价
2014/01/27 职场文书
产品推广策划方案
2014/05/10 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
贫困生证明范文
2015/06/16 职场文书
python实现批量移动文件
2021/04/05 Python
如何获取numpy array前N个最大值
2021/05/14 Python