首頁 >web前端 >css教學 >css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

不言原創: 2018-11-08 17:31:463628瀏覽

這篇文章要跟大家分享的是關於css中flex-shrink屬性的使用方法，有需要的朋友可以參考一下。

使用flex-shrink屬性指定Flexbox中的框架寬度小於不必要的寬度時框架寬度的程度。

語法：

flex-shrink :(数量）

程式碼範例：

flex-shrink.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-shrink.css" />
  </head>
  <body>
  <div class="container">
    <div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
    <div class="frameB">第二个内容<br />php中文网<br /></div>
    <div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
    <div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
    <div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
  </div>
  </div>
  </body>

flex-shrink.css

.container { 
   display: flex;
}
.frameA {   
    border: 1px solid #e9006b;    
    flex-shrink: 1;
}
.frameB { 
   border: 1px solid #ff6a00;    
   flex-shrink: 2;
}
.frameC {  
  border: 1px solid #d0b106;    
  flex-shrink: 3;
}
.frameD { 
   border: 1px solid #4aae20;    
   flex-shrink: 4;
}
.frameE { 
   border: 1px solid #01b9b3;    
   flex-shrink: 5;
}

說明：

我們將frameA flex-shrink設定為1，frameB flex-shrink設定為2，frameC flex-shrink 3，frameD flex-shrink 4，frameE flex-shrink 5。如果框架的寬度變得比文字顯示所需的寬度窄，則此設定可讓您指定減少框架寬度的程度。幀的縮小程度以frameA：frameB：frameC：frameD：frameE = 1：2：3：4：5的比率變窄。（frameE比frameA收縮得多。）

效果如下：

使用網頁瀏覽器顯示上述程式碼結果。顯示如下所示的頁面。

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

減少視窗寬度。每個影格的寬度仍然是允許內容在不必縮小時不必要地顯示的寬度。

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

如果進一步縮小視窗寬度，內部文字將變為包裝顯示，並且框架寬度會縮小

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

進一步縮小框架的寬度。從「第一內容」的框架可以看出「第五內容」框架的寬度急遽縮小。

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

透過進一步縮小寬度，您可以很明顯地看到變化的程度。

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）

可以確認框架的變窄寬度以frameA：frameB：frameC：frameD：frameE = 1：2：3：4：5的比率變窄。

僅在一幀中指定flex-shrink時的操作

將CSS更改為以下內容並僅在一幀中指定flex-shrink。

flex-shrink.css

.container {
    display: flex;
}
.frameA { 
   border: 1px solid #e9006b;    
   flex-shrink: 5;
}
.frameB { 
   border: 1px solid #ff6a00;
}
.frameC { 
   border: 1px solid #d0b106;
}
.frameD {  
  border: 1px solid #4aae20;
}
.frameE { 
   border: 1px solid #01b9b3;
}

在網頁瀏覽器上顯示頁面。在視窗寬度很寬的狀態下和前面的情況一樣，各框都用不需要顯示寬度。

css中flex-shrink屬性用法（框架的寬度小於頁面寬度時縮小寬度）