详解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样式中的 !important * _ 符号
Mar 09 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
Element Input组件分析小结
2018/10/11 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
什么是python的必选参数
2020/06/21 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
部队党性分析材料
2014/02/16 职场文书
广告创意求职信
2014/03/17 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
中职招生先进个人材料
2014/08/31 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle