详解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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 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中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
详解Python3 pandas.merge用法
2019/09/05 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python如何基于redis实现ip代理池
2020/01/17 Python
在python中使用nohup命令说明
2020/04/16 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
护理个人求职信范文
2014/01/08 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2015年少先队活动总结
2015/03/25 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
spring cloud 配置中心native配置方式
2021/09/25 Java/Android