css中box-flex屬性如何使用

發(fā)布時(shí)間：2020-09-24 09:36:42 來(lái)源：億速云閱讀：151 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)css中box-flex屬性如何使用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

css box-flex屬性用于規(guī)定框的子元素是否可伸縮其尺寸，其語(yǔ)法是box-flex: value，可伸縮元素能夠隨著框的縮小或擴(kuò)大而縮寫(xiě)或放大。

css box-flex屬性怎么用？

作用：規(guī)定框的子元素是否可伸縮其尺寸。

語(yǔ)法：

box-flex: value;

說(shuō)明：value 元素的可伸縮行。柔性是相對(duì)的，例如 box-flex 為 2 的子元素兩倍于 box-flex 為 1 的子元素。

注釋?zhuān)嚎缮炜s元素能夠隨著框的縮小或擴(kuò)大而縮寫(xiě)或放大。只要框中有多余的空間，可伸縮元素就會(huì)擴(kuò)展來(lái)填充這些空間。目前沒(méi)有瀏覽器支持 box-flex 屬性。Firefox 支持替代的 -moz-box-flex 屬性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。

css box-flex屬性使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">億速云</p>
</div>
<p><b>注釋?zhuān)?lt;/b>IE 不支持 box-flex 屬性。</p>
</body>
</html>

感謝各位的閱讀！關(guān)于css中box-flex屬性如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

css中box-flex屬性如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽