详解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的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
Textarea根据内容自适应高度
2013/10/28 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
原生js二级联动效果
2017/06/20 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
python将ip地址转换成整数的方法
2015/03/17 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python 图像平移和旋转的实例
2019/01/10 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
给校长的建议书400字
2014/05/15 职场文书
社区维稳工作方案
2014/06/06 职场文书
学校端午节活动方案
2014/08/23 职场文书
实验心得体会
2014/09/05 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL