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）