本文转载自：https://blog.csdn.net/sinat_41695090/article/details/79215893

先粘贴上一段代码，flex总体布局

　　

<body>

　　<div class="total">

　　　　<div class="one">第一个</div>

　　　　<div class="two">第二个</div>

　　　　<div class="three">第三个</div>

　　</div>

</body>

css样式

*{

　　margin:;

　　padding: ;

}

.one{

　　background: #f00;

}

.two{

　　background: #0f0;

　　height: 30px;

}

.three{

　　background: #00f;

　　height: 60px;

}

.total{

　　width: 900px;

　　height: 100px;

　　display: flex;

　　

　　display: -webkit-flex;

　　background: #ff0;

　　flex-direction: row;

　　-webkit-flex-direction:row;

　　flex-wrap:wrap;

　　-webkit-flex-wrap:wrap;

　　justify-content:space-between;

　　-webkit-justify-content:space-between;

}

.total>div{

　　flex-grow:;

　　-webkit-flex-grow:;

}

.total>.two{

　　flex-grow:;

　　-webkit-flex-grow:;

}

第二个div设置flex-grow为2，另外两个均为1.

实际效果第二个div并没有是其他两个div的宽度的二倍，似乎是不到二倍，但确实是比另外两个要大，这是为什么呢？

后来经过一番折腾终于搞明白了，是自己的理解有误，参考于阮一峰先生的相关文章，链接在这里flex布局教程。

自己总结了三个解决办法：

一、结合flex-basis

将整体div样式进行修改，加入flex-basis属性

.total>div{

　　flex-grow:;

　　-webkit-flex-grow:;

　　flex-basis:;

　　-webkit-flex-basis:;

}

设置项目固定空间均为0；
二、不单设置flex-grow属性，设置flex综合属性

这一点在阮一峰老师文章中有提到，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

单单设置flex-grow的数值时，因为这时flex-basis的值为auto，项目占据了相应的固定空间，导致设置错误。

.total>div{

　　flex:;

}

.total>.two{

　　flex:;

}

三、去掉div文本内容

这种方法是使div中不含有固定宽度，设置二倍不成功的根本原因就在这儿，因为div中的文本占有固定宽度，我们都知道flex-grow设置的是剩余空间的大小分配，而剩余空间就是去掉文本之后的空间，大家可以自己计算一下，为什么不是我们想要的二倍，去掉div中的文本，就相当于去掉了固定空间，如下

<body>

　　<div class="total">

　　　　<div class="one"></div>

　　　　<div class="two"></div>

　　　　<div class="three"></div>

　　</div>

</body>
.total>div{

　　flex-grow:;

　　-webkit-flex-grow:;

}

.total>.two{

　　flex-grow:;

　　-webkit-flex-grow:;

}

这样设置出来也是二倍关系，当然，这种方法肯定不推荐

其实，这三种方法的原理实际上是一样的，都是使固定空间为0，切记flex-grow设置的是剩余空间的分配比例，分配之前一定要先除去实际固定空间在进行计算。

flex 布局，flex-grow 宽度未等比放大问题解决办法的更多相关文章

  1. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  2. [flex 布局]——flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  3. flex布局基本语法

    注 : 本文章按照菜鸟教程 Flex布局语法教程为原型稍加修改,以方便自己学习. 菜鸟教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009 ...

  4. 第103天：CSS3中Flex布局（伸缩布局）详解

    一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...

  5. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  6. flex布局使用

    什么是flex布局 flex是flexible Box的缩写,意味"弹性盒子",用来为盒子状模型提供最大的灵活性 任何一个盒子都可以指定为flex布局 .box{ display: ...

  7. Flex布局的详细总结

    Flex布局的详细总结 1.认识flex布局 flex布局(flexible布局,弹性布局),是目前web开发中使用的最多的布局方案. 两个重要概念: 开启flex布局的元素叫flex contain ...

  8. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  9. 微信小程序之Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. Kattis - barcode

    Kattis - barcode 题目原文: To prepare for ACM-ICPC 2017 in Saigon, the host univeristy – Ho Chi Minh cit ...

  2. 2019 ACM-ICPC 南京 现场赛 H. Prince and Princess

    题意 王子想要娶公主,但是需要完成一个挑战:在一些房间中找出公主在哪. 每个房间有一个人,他们彼此知道谁在哪个房间.可以问他们三种问题: 你是谁? 在某个房间是谁? 公主在哪个房间? 有三类人,一类一 ...

  3. LeetCode题：旋转链表

    原题: 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = 2输出: ...

  4. 使用element-ui 组件动态合并table的行/列（第二次修改）

    这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...

  5. 慎用margin系列1---CSS的margin塌陷(collapse) 问题与对策

      对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的 ...

  6. img点击放大的js实现

    业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...

  7. Optparse 简介

    optparse 这个库的主要作用是可以用为脚本提供传递命令参数功能 一个简单的例子 def main(): parser = OptionParser(usage = "usage: %p ...

  8. 36-python基础-python3-字典与列表的区别

    (1)不像列表,字典中的表项是不排序的.名为 spam 的列表中,第一个表项是 spam[0].但字典中没有“第一个”表项. (2)确定两个列表是否相同时,表项的顺序必须相同,但在字典确定两个字典是否 ...

  9. TurtleBOT3

    ubuntu更换源 sudo cp /etc/apt/sources.list /etc/apt/sources_backup.list sudo gedit /etc/apt/sources.lis ...

  10. HTMl中Meta标签和meta property=og标签含义

    meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...