详解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实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
html css3不拉伸图片显示效果
Jun 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
用js遍历 table的脚本
2008/07/23 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
技能竞赛活动方案
2014/02/21 职场文书
测控技术自荐信
2014/06/05 职场文书
消防宣传口号
2014/06/16 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
2015年安全生产责任书
2015/01/30 职场文书