溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS中如何使用flex-basis屬性來設(shè)置Flexbox邊框?qū)挾龋闹薪榻B的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
要指定Flexbox邊框?qū)挾纫褂玫膶傩允莊lex-basis。
我們來看具體的代碼
flex-basis.css
.container{
display:flex;
}
.frameA{
border:1pxsolid#e9006b;
flex-basis:64px;
}
.frameB{
border:1pxsolid#ff6a00;
flex-basis:128px;
}
.frameC{
border:1pxsolid#d0b106;
flex-basis:194px;
}
.frameD{
border:1pxsolid#4aae20;
flex-basis:256px;
}
.frameE{
border:1pxsolid#01b9b3;
flex-basis:320px;
}
flex-basis.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<linkrel="stylesheet"href="flex-basis.css"/>
</head>
<body>
<divclass="container">
<divclass="frameA">第一個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
<divclass="frameB">第二個內(nèi)容<br/>php中文網(wǎng)<br/></div>
<divclass="frameC">第三個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
<divclass="frameD">第四個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
<divclass="frameE">第五個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
</div>
</body>
</html>
說明：將flex-basis屬性設(shè)置為flexbox邊框?qū)挾鹊幕局?。在該示例中，從左幀開始依次設(shè)置64像素，128像素，194像素，256像素，320像素的值。
效果如下：
使用Web瀏覽器顯示上述HTML文件。顯示如下所示的頁面。如果Web瀏覽器的窗口寬度大于框架的寬度，則會顯示指定框架的大小。在下圖中，64px從左至右，128px，194px，256px，你可以看到320px的寬度的邊框。
360截圖20181108165606631.jpg
即使窗口的寬度變窄，如果寬度大于框架寬度，框架的寬度也不會改變。
360截圖20181108173422254.jpg
如果窗口寬度變得窄于框架的總寬度，則框架的寬度會縮小。
360截圖20181108173459142.jpg
由于我們沒有為flex-shrink屬性設(shè)置值，因此每幀的幀寬將以相同的比率縮小。要更改每幀的幀縮小程度，請設(shè)置flex-shrink屬性。有關(guān)flex-shrink屬性行為的詳細信息，請閱讀此篇文章。
360截圖20181108173546213.jpg
我們進一步縮小窗口寬度。即使縮小窗口，您也可以看到框架寬度的比例與窗口寬度的寬度相同。
補充：在窗口寬度滿顯示框的情況下
在上面的示例中，如果窗口寬度較寬，則會在右側(cè)創(chuàng)建邊距。您可能希望顯示框架以填充窗口寬度。
如果將窗口的寬度全部利用并顯示框架的話，會在框的Cs中設(shè)置flex-grow屬性。有關(guān)flex-grow屬性的更多信息請看這篇文章。
在以下的代碼中，因為在最右邊的frameD設(shè)定了flex-grow屬性，所以窗口寬度大的情況下，最右邊的框的橫幅在伸展窗口的寬度滿滿地被顯示。
flex-basis.css
.container{
display:flex;
}
.frameA{
border:1pxsolid#e9006b;
flex-basis:64px;
}
.frameB{
border:1pxsolid#ff6a00;
flex-basis:128px;
}
.frameC{
border:1pxsolid#d0b106;
flex-basis:194px;
}
.frameD{
border:1pxsolid#4aae20;
flex-basis:256px;
}
.frameE{
border:1pxsolid#01b9b3;
flex-basis:320px;
flex-grow:1;
}
flex-basis2.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<linkrel="stylesheet"href="flex-basis2.css"/>
</head>
<body>
<divclass="container">
<divclass="frameA">第一個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
<divclass="frameB">第二個內(nèi)容<br/>php中文網(wǎng)<br/></div>
<divclass="frameC">第三個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
<divclass="frameD">第四個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
<divclass="frameE">第五個內(nèi)容<br/>php中文網(wǎng)<br/>php中文網(wǎng)</div>
</div>
</div>
</body>
</html>
以上是“CSS中如何使用flex-basis屬性來設(shè)置Flexbox邊框?qū)挾取边@篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
