這篇文章要跟大家介紹的內容是有關於使用flex-basis屬性來設定Flexbox邊框寬度,有需要的朋友可以參考一下。
要指定Flexbox邊框寬度要使用的屬性是flex-basis。
我們來看具體的程式碼
flex-basis.css
.container { display: flex; } .frameA { border: 1px solid #e9006b; flex-basis: 64px; } .frameB { border: 1px solid #ff6a00; flex-basis: 128px; } .frameC { border: 1px solid #d0b106; flex-basis: 194px; } .frameD { border: 1px solid #4aae20; flex-basis: 256px; } .frameE { border: 1px solid #01b9b3; flex-basis: 320px; }
flex-basis.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="flex-basis.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> </body> </html>
說明:將flex- basis屬性設定為flexbox邊框寬度的基本值。在這個範例中,從左側影格開始依序設定64像素,128像素,194像素,256像素,320像素的值。
效果如下:
使用網頁瀏覽器顯示上述HTML檔案。顯示如下所示的頁面。如果Web瀏覽器的視窗寬度大於框架的寬度,則會顯示指定框架的大小。在下圖中,64px從左到右,128px,194px,256px,你可以看到320px的寬度的邊框。
即使視窗的寬度變窄,如果寬度大於框架寬度,框架的寬度也不會改變。
如果視窗寬度變得窄於框架的總寬度,則框架的寬度會縮小。
由於我們沒有為flex-shrink屬性設定值,因此每幀的幀寬將以相同的比率縮小。若要變更每個畫面的幀縮小程度,請設定flex-shrink屬性。有關flex-shrink屬性行為的詳細信息,請閱讀此篇文章。
我們進一步縮小視窗寬度。即使縮小窗口,您也可以看到框架寬度的比例與視窗寬度的寬度相同。
補充:在視窗寬度滿顯示框的情況下
在上面的範例中,如果視窗寬度較寬,則會在右側建立邊距。您可能希望顯示框架以填滿視窗寬度。
如果將視窗的寬度全部利用並顯示框架的話,會在框的Cs中設定flex-grow屬性。有關flex-grow屬性的更多資訊請看這篇文章。
在以下的程式碼中,因為在最右邊的frameD設定了flex-grow屬性,所以視窗寬度大的情況下,最右邊的框的橫幅在伸展視窗的寬度滿滿地被顯示。
flex-basis.css
.container { display: flex; } .frameA { border: 1px solid #e9006b; flex-basis: 64px; } .frameB { border: 1px solid #ff6a00; flex-basis: 128px; } .frameC { border: 1px solid #d0b106; flex-basis: 194px; } .frameD { border: 1px solid #4aae20; flex-basis: 256px; } .frameE { border: 1px solid #01b9b3; flex-basis: 320px; flex-grow: 1; }
flex-basis2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="flex-basis2.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> </html>
使用網頁瀏覽器顯示上述結果。顯示如下所示的頁面。您可以看到框架顯示在視窗的整個寬度上。
縮小視窗寬度也會減少框架的寬度。
以上是使用flex-basis屬性來設定Flexbox邊框寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章!