精华内容
下载资源
问答
  • width= fatherWidth−没有flex1的所有元素的宽度和flex1的元素的个数\frac{fatherWidth - 没有flex1的所有元素的宽度和}{flex1的元素的个数}flex1的元素的个数fatherWidth−没有flex1的所有元素的...

    我认为给子元素定属性 flex:1 (前提是父容器要是flex布局)

    这个定了flex为1的子元素的宽度计算为

    width= f a t h e r W i d t h − 没 有 定 f l e x 为 1 的 所 有 元 素 的 宽 度 和 f l e x 为 1 的 元 素 的 个 数 \frac{fatherWidth - 没有定flex为1的所有元素的宽度和}{flex为1的元素的个数} flex1fatherWidthflex1

    给个简单例子看看

    比如左边定宽,右侧自适应

    		#div1 {
    			display: flex;
    			height: 100px;
    			width: 100px;
    			background-color: red;
    			margin: 200px auto;
    		}
    		.d1{
    			width: 80px;
    			height: 100px;
    			background-color: #0077AA;//蓝色
    		}
    		.d2{
    			flex: 1;
    			height: 100px;
    			background-color: #008000;//淡绿色
    		}
    
    	<div id="div1">
    		<div class="d1"></div>
    		<div class="d2"></div>
    	</div>
    

    效果如下
    在这里插入图片描述

    展开全文
  • 例如在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:2的属性,给b元素flex:1的属性,不给c元素。 计算宽度是:剩余空间(400px-300px):100px + 参与flex项目尺寸200px=300px 再按3份的...

    一、flex的宽度计算方式是容器剩余空间+具有flex属性的元素自身尺寸:
    例如在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:2的属性,给b元素flex:1的属性,不给c元素。
    计算宽度是:剩余空间(400px-300px):100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份,b1份。
    最后:a:width:200px ; b:width:100px ; c:width:100px

    二、flex:grow的宽度计算方式只是容器剩余空间:
    还是在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:2的属性,给b元素flex-grow:1的属性,不给c元素。
    计算宽度是:剩余空间(400px-300px):100px
    剩余100px再按3份比例给a2份+自身本身尺寸,b1份+自身本身尺寸
    最后:a:width:166.7px ; b:width:133.3px ; c:width:100px

    三、如果一个容器中的所有项目都给了flex或flex-grow属性,那么在计算中没有差别。两者最大的差别就在于flex的宽度是具有flex属性(即参与项目)尺寸再加上剩余空间。再除以份数剩以比例。
    再举2个例子:
    1、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:3的属性,给b元素flex:2的属性,不给c元素。
    计算宽度是:剩余空间0 + 参与flex项目尺寸200px=200px 再按5份的比例给a3份(200除以5剩以3),b2份。
    最后:a:width:120px ; b:width:80px ; c:width:100px

    2、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:3的属性,给b元素flex-grow:2的属性,不给c元素。
    计算宽度是:剩余空间0 项目没有可分配的空间,尺度不会发生变化。
    最后:a:width:100px ; b:width:100px ; c:width:100px

                                                                                      are U get?
    
    展开全文
  • 相信大家用过flex布局都会用到flex:1这样的语句来平分空间,但是关于flex1实际等于什么却没有细细探索过。 首先flex这个属性是一个缩写,实际上代表的是: flex:flex-grow || flex-shrink || flex-basis flex:1...

    相信大家用过flex布局都会用到flex:1这样的语句来平分空间,但是关于flex:1实际等于什么却没有细细探索过。

    首先flex这个属性是一个缩写,实际上代表的是:

    flex:flex-grow || flex-shrink || flex-basis

    flex:1实际上是以上三种属性的缩写形式。

    • flex-grow//定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    • flex-shrink //定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
    • flex-basis//定义了在分配多余空间之前,默认是auto,即项目本来的大小

    flex这个缩写属性有一个规则,我总结如下:

    1. flex后面只有一个值且无单位,代表的是flex-grow
    2. flex后面有两个值且无单位,则依次代表flex-grow和flex-shrink
    3. flex后面有单位,则表示flex-basis

    所以,flex:1其实代表的是flex-grow:1,另外两个取默认值即可,答案呼之欲出:

    flex:1 实际代表的就是 flex:1 0 auto

    后面去查了MDN,也说flex:1实际代表的是flex:1 0 auto。

    但是在谷歌浏览器中输入flex:1,查看样式发现flex:1代表的是flex:1 1 0%
    在这里插入图片描述
    所以究竟哪个对呢?而且0%是什么玩意?

    仔细看看flex-basis的定义:

    是说定义了在分配多余空间之前,默认是auto,即项目本来的大小。

    翻译一下就是flex-basis决定了子项目原本占据多大空间,然后再去分配剩余空间。

    之所以谷歌浏览器中要使用flex-basis:0%,我想是出于这样的场景考虑:

    我定义了三个盒子,宽度分别是100px / 200px / 300px
    我想实现三等分浏览器窗口,这个时候如果设置flex:1 0 auto,我们会发现三个盒子并不是平均三等分的,而是有一定比例的。
    设置成flex:1 0 0%才会三等分窗口,意思是先将这三个盒子的原始宽度都置为0%,即将原始宽度都设置成一样大,这样才会等分。

    但是我们使用flex:1更多情况就是为了等分,实际上设置成flex:1 0 1px / flex:1 0 2px / flex:1 0 2em 甚至任何有数值的长度都能实现等分的效果,原理和上述一样。

    总结:

    flex:1实际代表flex:1 0 auto,但在某些浏览器的具体实现中考虑到我们日常业务场景会设置成flex:1 0 0%

    展开全文
  • 由于input默认存在最小宽度,所以在父元素宽度太小的情况下input设置了flex:1会失效 <div style="width: 100px;display: felx;"> <input style="flex: 1;"><!-- 此时flex: 1就会失效 --> <...

    由于input默认存在最小宽度,所以在父元素宽度太小的情况下input设置了flex:1会失效

    <div style="width: 100px;display: felx;">
    <input style="flex: 1;"><!-- 此时flex: 1就会失效 -->
    <button style="flex: 0 0 25px"></button>
    </div>
    

    解决办法:
    外面加上一层元素包裹input,然后设置外层元素的flex: 1,input设置width: 100%即可

    <div style="width: 100px;display: felx;">
    <div style="flex: 1;">
    <input style="width: 100%"><!-- 此时input就可以自动获取到剩余的宽度 -->
    </div>
    <button style="flex: 0 0 25px"></button>
    </div>
    
    展开全文
  • box-flex: 1

    2017-02-22 14:41:17
    设置.md-f1 { box-flex: 1; -webkit-box-flex: 1; },感觉没用啊可是删掉的话,这个div会移动到最右边。 订单编号: 95 医保编号: 0102306305 姓名: 柴立睿
  • flex:1的理解

    2019-07-22 22:11:28
    假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 auto。同理,如下是等同的: .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; } 当 flex 取值为 none,则...
  • flex布局在ie浏览器中flex-direction: column元素后子元素flex:1不生效的问题 flex: 1flex-grow: 1;flex-shrink:1;flex-basis: 0%;的缩写 而情况就是chrome浏览器正常显示,ie浏览器不行; 但若是将chrome...
  • flex:1;详解

    万次阅读 多人点赞 2018-01-12 20:32:26
    首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况: flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值是
  • style={{ flex: 1 }}> Tabs> TabPane tab="Tab01" key="junior"> Text>{"Tab内容001"}Text> TabPane> TabPane tab="Tab02" key="middle"> Text>{"Tab2内容002"}Text> TabPane> Tabs> View>;
  • 这个方法还能解决 flex:1 超出省略号css失效。 这个方法safari浏览器目前还不兼容,但是chrome有效 /* 父元素 */ .parent{height:0;} 父元素 与 子元素 通过定位解决。 /* 父元素 */ .paren...
  • flex属性是 flex-grow + flex-shrink + flex-basis 的缩写。 1.赋给3个值 .item { flex: 100 200 300px; } // 等价于 .item { flex-grow: 100; flex-shrink: 200; flex-basis: 300px; } 2.赋值为auto...
  • 在一个flex布局中,对于一个设置了flex属性设置为1的div容器,再对其设置min-width:0,保证内容不超出外层容器
  • 但是实际开发的过程中出现了子组件始终不能均匀分布的问题,flex1属性根本没生效,如下效果: 于是仔细检查每一处: App.vue TabBar组件 TabBarItem组件 发现了问题: 在TabBarItem组件的template中多嵌套了一...
  • 1 <div class="container"> 2 <div class="item"> 3 <div class="item-inner"> 4 <a> 5 Botón 6 </a> 7 ...
  • FLEX:Bindable标签

    2009-12-28 00:15:00
    元数据标签是一种特殊的标签,它在代码中的作用就是向编译器提供如何编译程序的信息。实际上,这些标签并没有被编译到生成的SWF文件中,而只是告诉编译器如何生成SWF文件。[Bindable] Bindable元数据标签是最经常...
  • flex: 使用setInterval 制作定时器

    千次阅读 2009-07-14 10:13:00
    setInterval 函数是Action Script 的全局函数,在Action Script 3.0 中它 被封装在 flash.util 包中,详见http://livedocs.macromedia.com/labs/1/flex/langref/migration.html, 它需要flash player 6 或以上版本的...
  • Flex 自定义组件外观 魏 强, 硕士研究生, 东北大学软件学院 简介: Flex 是现今最受欢迎的 RIA 开发技术之一,它凭借其优秀的用户体验获得许多用户的青睐,因此也吸引了众多的程序员投入 Flex 学习的洪流之中。...
  • flex布局异常(flex-grow:1

    万次阅读 2018-09-27 12:01:21
    当用flex布局,给了一部分定值,而另一部分铺满flex-grow:1;给定值的部分会变化。 这时候flex-basis (default:auto)就出场了,加上flex-basis:0;就不会异常了。 看到一篇更详细和准确的文章: 转自:...
  • flexflex-grow不一样?flex布局详解,flex属性是个简写属性,flex-frow、flex-shrink、flex-basis
  • 作用:指定flex属性 取值:flex | inline-flex flex:将对象作为弹性伸缩盒展示,相当于块级属性,有默认宽度100% inline-flex:将对象作为内联块级弹性伸缩盒展示,即行级元素,没有默认宽度 flex-direction属
  • flex

    2016-03-14 17:43:19
    刚把-webkit-box-的属性过了...1:flex display:flex 设置容器可以弹性布局 2:flex:value flex:value相对有同一容器的其他灵活的项目,规定项目的长度 3:flex-grow flex-grow用来指定扩展比率,即剩余空间是正值时此「f
  • display:flex 布局详解(1

    万次阅读 多人点赞 2018-06-30 16:53:28
    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。一、Flex布局是什么?....box1{ display: flex;}.box2{ display: i...
  • 阿里云 &gt; 教程中心 &gt;...gt; Flex 布局教程:语法篇(阮一峰)  Flex 布局教程:语法篇(阮一峰... 摘要:Flex布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布局(layout)是CSS的一个重点应...
  • 问题复现 转载自油猴中文网:...李恒道QQ4548212 ...TamperMonkey GreaseMonkey 油猴脚本 脚本交流 脚本分享 油猴脚本开发 油猴基础开发 油猴 油猴中文 ... 这时div并没有占满 问题分析 这
  • Flex 布局教程:语法篇

    千次阅读 2020-10-12 22:43:18
    Flex 布局教程:语法篇 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以...
  • 1flex的出现 网页布局是css的一个重要应用。布局的传统解决方案,基于盒模型,依赖于 display 属性、position 属性、float 属性。对于那些特殊的布局非常不方便,比如 垂直居中 就不容易实现。 所以提出了一种新...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,254
精华内容 10,101
关键字:

flex:1没有作用