详解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动画效果
Aug 14 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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代码收集表单内容并写入文件的代码
2012/01/29 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
splice slice区别
2006/10/09 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python如何发布程序的详细教程
2018/10/09 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python super的使用方法及实例详解
2019/09/25 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python画图常规设置方式
2020/03/05 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
擅自离岗检讨书
2014/02/11 职场文书
2014年教研员工作总结
2014/12/23 职场文书
毕业生个人总结
2015/02/28 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python