详解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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 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
收音机的保养
2021/03/01 无线电
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
Vue实现购物车功能
2017/04/27 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
js实现图片实时时钟
2020/01/15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
社区文化建设方案
2014/05/02 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
老干部工作先进事迹
2014/08/17 职场文书
校园安全教育心得体会
2016/01/15 职场文书
《风筝》教学反思
2016/02/23 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Vue3.0 手写放大镜效果
2021/07/25 Vue.js