解决 flex 布局导致 svg 缩放

在项目中，图标会根据情况的不同，动态改变颜色和大小，使用svg，可以减少资源文件导入，flutter中使用svg，需用到flutter_svg 1、在pubspec.yaml引入flutter_svg flutter_svg: ^1.0.3 2、导入svg 把svg文件导入asset目录下 并在pubspec.yaml添加svg对应的目录 assets: - assets/images/tab/ 记得执行 flutter pub get 3、使用 引入文件 imp.

Flex 布局默认是会缩放和自适应的。如果你不希望其缩放和自适应，可以将容器的 flex-shrink 属性设为 0，flex-basis 设为 auto，flex-grow 设为 0。

什么是flex布局？它的由来由于传统的布局解决方案太过复杂，例如垂直居中、两端固定中间自适应。2009年，W3C提出了一种新的方案——flex布局也叫伸缩布局，flex布局它有什么好处？好处简单、灵活、自适应。......

“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。

网页布局的前身今世 近年来，网页布局逐渐趋于统一化。从最初使用position+display+float来实现，到后来bootstrap3提出的栅格化布局，再到如今大厂经常考的Flex布局，每次改进的出发点都是如何减少布局时的工作量。但每一代都有自己的重大缺陷传统布局BootStrap3BootStarp4Flex相当精确，但工作量太大选择单位时，跨设备和缩放无法适应而选取百分比又不是...

一、字体图标-iconfont 引入字体图标样式表iconfont.css body写<i class="iconfont /*第一个类名固定的*/icon-favorites-fill/*第二个用什么图标用什么类名*/"></i> 网上没有图标的话，要svg图片，再上传到iconfont网站 二、平面转换-transform 1.位移：transform：transslate（水平移动距离，垂直移动距离） .son{ transition:all 0.5s;

前言我们知道，在前端开发的过程中，最让人脑壳疼的就是页面的适配了。之所以说让人脑壳痛，倒不是说页面适配多么的困难。他不困难，就是做起来很很繁琐，特别是对于要移动端和 pc 端均要适配的页面，那处理起来就让人更头疼了。最近在做页面适配的时候，发现对于全设备（包括移动端和 pc 端）适配的时候，vw 和 vh 布局是一个很不错的方式（后面我们统一称呼维 vw 布局）。虽然不能保证在所有的屏幕尺寸都能达...

1、CSS3的flex布局 flex布局 基础知识 display:flex 元素变成一个flex容器 容器内部的元素 叫做flex元素或者flex项目(flex-item)，默认不换行，高度占100% 优点 比浮动布局更简洁，更易于维护 2、flex-direction属性（设置元素是横向还是纵向的 ） flex-direction属性 设置元素(flex-item)水平垂直方向 row(默认值) 主轴为水平方向，起点在左端 row-reverse 主轴为水

图片间隙bug的可以为 img 设置display:block; vertical-align 元素垂直对齐 。 当父元素空间不足，flex不换行，也不缩小，可以用flex:shrink:0 (默认值为1) 注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。 去边框可以用：border:0 或者 borer：none 解决img把父元素高度撑大3-6像素的方法有： .vertical-align:top; 当子元素的margin-top传递到父元..

Document

flex属性有三个值：flex-grow、flex-shrink和flex-basis。 flex-grow：指定弹性的子项的放大比例，默认值为0，当设置为0的时候，子项不会根据剩余的空间进行伸缩。当设置为正数的时候，子项会按照比例进行分配剩余的空间。 flex-shrink：指定弹性盒子的缩小比例，默认值为1.当可用空间不足时，子项根据，flex-shrink的比例进行缩小，可以设置为0，表示子项不允许缩小。 flex-basis：指定弹性子项在主轴的初始大小，默认值为auto，可以设置为具体长度值(如：

flex布局有一个属性flex-shrink，指定了当出现压缩时，元素被压缩的比例。默认值是1，所以上面的问题就是由于该属性引起的，默认情况下所有的子元素都被压缩了。我们只要把子元素的flex-shrink设置成0即可。

flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。 就是给子元素加 flex-shrink: 0; 就不压缩了

1、静态显示       在FLEX应用程序中可以使用SVG资源, 但只能象JPG和GIF那样作为一种图像引入, 而不包括SVG的一些高级特性, 而且无法在运行时加载, 只能在编译时静态加载，所以图片的大小无法改变。 2、动态加载svg图片      Degrafa框架已经非常接近在FLEX中动态显示和操作SVG文档了，通过一些简单的转换, 基本上能够实现对SVG图形进行显示和操作。这样...

以上代码flex 布局缩放窗口时元素不自动缩放,把宽度，高度单位调为rem也没用，引起这个问题的原因是插入的图片。尝试把img 属性width值改为100%后解决以上问题。废了不少时间，特此记录一下。

存档日期：2019年5月14日 | 首次出版：2009年3月17日 SVG（可缩放矢量图形）是图形领域中最重要的技术之一。 Adobe Flash Player及其变体Flex提供了对SVG的完全支持。 但是，使用SVG创建复杂图形始终很困难。 要使SVG与位图数据一起使用，需要了解复杂的概念，例如矩阵旋转，透明度等。 输入Flex。 本文向您介绍Flex中SVG的迷人世界。 仅通过矢量绘...

flex布局 flex-shrink: 0防止图片被压缩 flex容器中，当空间不够的时候，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink:0 上述图片代码： .basics-body { display: flex; justify-content: flex-start; align-items: center; margin:16px;