flex压缩

‘壹’ 【css中flex属性】固定宽度被挤压 flex为1的元素宽度超出父元素

当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩，解决方法: 给固定宽度的元素添加flex-shrink:0。

flex-shrink
指定了 flex 元素的收缩规则。

设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。

解决方案：给右侧设置了flex:1;的元素，同时设置width:0

‘贰’ flex 布局中固定宽度不起作用，被压缩了

grid 有7个，每个150rpx，按道理屏幕应该展示不了这么多，需要滚动观看，实际上全部展示出来了，只是 grid 宽度没有150rpx这么多，被压缩了。

这里要用到 flex-shrink 这个属性， flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex 元素仅在 默认宽度之和大于容器 的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

给 grid 加上 flex-shrink: 0; 。

这样项目就不会被压缩了。

‘叁’ flex布局

1 .1维布局，一个flex一次只能处理一个维度上的元素布局，一行或者一列。
2 .如果不规定换行，就算是超了，会等比压缩缩小，而不是自动换行，想要换行必须要使用felx-wrap
3 .任何一个容器都可以被指定为flex布局
4 .行内元素可以被指定为inline-flex
5 .设置flex之后，子元素的float,clear，vertical-align

1 .在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flex-basic设置的基础属性，以及外部填充flex-grow,收缩flex-shrink，还有最大，最小尺寸限制这5个共同决定的
2 .基础尺寸：flex-basic,box-sizing盒模型共同决定
3 .弹性增长;flex-grow属性，弹性收缩；flex-shirk属性
4 .最小尺寸min-wdith,max-width等css属性，min-content最小内容尺寸,width也属于最小尺寸了
5 .在flex布局中，子项设置width是没有直接效果的.实际设置的width，虽然看起来生效了，但是效果是flex-basic的作用
6 .flex-basic的默认值是auto，也就是完全根据子列表项自身尺寸渲染(min-width>||max-width>width>content-size)

7 .是盒模型，元素自身尺寸特性，以及flex属性共同作用的结果。

最大最小尺寸限制>弹性收缩，弹性扩张>基础尺寸
1 .所以无论是什么布局min-width,max-width这种属性都拥有绝对权威

1 .如果是数值，比如flex:1。chrome里面是flex-basis:0%,flex-grow:1,flex-shirk:1.

2 .如果是长度值，比如flex:100px。还是chrome，flex-basis:100px,flex-grow:1,flex-shirk:1。

1 .2个参数，3个参数，以及initial,auto,none这些关键字，没有记的必要，直接分开写的清清楚楚不就好了，非要用一些自己不是很明白的参数在那里瞎搞
2 .flex默认值 0 1 auto 。也就是不放大，等比缩小，用原来的大小

1 .分配固定的家产数量
2 .如果同时设置width，会被忽略，但是max-width，min-width，优先级比flex-basis更高。但是最高不要用这个值，也就是使用宽度直接使用flex-basis就可以，不需要单独给子项固定width，这样会让人很疑惑。甚至根本不需要min-width/max-width这些属性
3 .flex-basic是作用在content-box上的.设置的width+padding+border

。如果给他设置box-sizing:border-box:那么宽度会减小，减小的长度是padding-left+padding-right+border*2的长度
4 .flex-basis:支持一堆关键字，但是好多都不支持

1 .家产任然后赋予的时候在怎么分。默认是0.多余空间不分配

1 .家产剩余不够分的时候怎么分。默认是1，空间不足会分配

1 .每一个item固定大小100px。只有flex-basis：100，其余两属性没有，但是宽度不足，又没有换行的时候，宽度不够，所有都是会一起缩小的，并不是最小宽度，这是因为flex-shirk:默认是1.所以属性一定还是设置的

2 .每一个item最小宽度是100，多余宽度等扩大，但是要有间距.因为会等比扩大，所以间距要自己设置，这里可以设置padding。还有一个重要的就是background-color的计算和bos-sizing没有关系。所以这里加padding没啥用，背景颜色还是在原来的范围内显示，只是content-box会变化。所以这里要加margin,但是marginzhe这里也有一个坑点，flex布局下不会自动margin折叠，所以不能简单的margin：10，这样各个item的间距不一样

1 .flex-direction:决定主轴的方向

从左到右非别是

2 .flex-wrap:默认情况下，所有项目都是排在一条线上，就算是超了，默认情况下都是按照1:1缩小，而不是机灵的自动换行，必须使用这个属性才会自动换

3 .flex-flow:上面那俩属性的合并值。

4 .justify-content:主轴上项目的对齐方式。如果是横向主轴，那么是左右的对齐方式，如果是竖向主轴，那么就是上下的对齐方式

5 .align-items:交叉轴上的对齐方式，也就是上下对齐方式.具体的对齐方式和交叉轴有关系

6 .align-content属性：多跟轴线的对齐方式,如果项目只有一根轴线，这个属性
不起作用

1 .order：本来列表是按照实际的渲染顺序来显示的，如果单独给某个属性设置这个值，数字越小，排列越靠前。

2 .flex-grow

3 .flex-shrink

4 .flex-basis

5 align-self:重点。覆盖align-items属性，允许单个项目和其他有不一样的对齐方式.会覆盖align-items属性。

‘肆’ css中flex布局导致容器中图片被压缩问题

图中：头像、“账号名称”，“具体名称内容”是一个容器内的三部分，给容器设置`display:flex`，时，如果“具体名称内容”字数过多，出现换行，会导致图片宽度被压缩，页面成为如下样子：

为了防止图片被压缩，可以给图片容器设置`flex-shrink: 0;`，只有不为0的元素才会被压缩。

‘伍’ flex是什么意思

flex的意思如下：

1、动词：弯曲，曲折（四肢，关节）；活动，绷紧（肌肉）；（材料）有弹性。

2、名词：（电器用的）皮线，花线；屈曲；<美，俚>松紧带；指AdobeFlex，基于其专有的Macromedia Flash平台，它是涵盖了支持RIA（Rich Internet Applications）的开发和部署的一系列技术组合。

3、形容词：<美，非正式>弹性工作制的。

近义词介绍：constringe

表达意思：使收敛；使收缩；压缩。

词性：通常在句中作动词，修饰主语或宾语。

例句：This kind of facial cleanser canconstringeand clean the pores of face.

此款洗面奶能够收敛及清洁毛孔。

‘陆’ flex布局中的width

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-grow定义对额外空间的占有量，默认0，即表示有多余的空间也不要。

当给最后一个box加上flex-box的类，即设置flex:1，则最后一个box会占据剩下空间，如果给每个box设置不同的flex值，则会按比例分配剩下的空间。

和flex-grow相反，即当各个元素所占空间之和大于容器时，压缩每个元素的比例，默认是1.如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

1.当设置box的flex-shrink为0时，即不论超出多少，都不压缩子元素的空间，如下图

2.当每个box设置flex-shrink为1时，即三个box压缩同样的比例，如下图

表示在分配额外空间之前，成员占据的空间，默认值为auto，意思就是你本来占多少就是多少。但也可以自己设置长度(px)。这个值的效果就是确定在释放和分配空间的时候，你的初值是多少,即flex items 在被放进一个flex容器之前的大小

flex：auto； 等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。

flex:none; 等同于flex：0 0 auto； 意思是不占额外空间，不可缩放。

‘柒’ 解决flex布局种宽度被压缩的问题

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

解决方法：给被压缩宽度的元素添加 flex-shrink:0; （也可简写 flex: none或者 flex: 0 0 auto）；其余元素设置 flex-shrink: 1; （也可简写flex: auto或者 flex: 1 1 auto）