Home >Web Front-end >Front-end Q&A >How to use css box-flex attribute
How to use css box-flex attribute
- 藏色散人Original
- 2019-05-29 14:20:242407browse
css The box-flex attribute is used to specify whether the child elements of the box can expand or contract its size. Its syntax is box-flex: value. The scalable element can be abbreviated or enlarged as the box shrinks or expands.
How to use the css box-flex attribute?
Function: Specifies whether the child elements of the box can expand or contract their size.
Syntax:
box-flex: value;
Description: The scalable row of value elements. Flexibility is relative, for example, a child element with a box-flex of 2 is twice as flexible as a child element with a box-flex of 1.
Note: Scalable elements can shrink or expand as the box shrinks or expands. Whenever there is extra space in the box, the scalable element expands to fill that space. No browser currently supports the box-flex attribute. Firefox supports an alternative -moz-box-flex property. Safari, Opera, and Chrome support the alternative -webkit-box-flex attribute.
css box-flex attribute usage example
<!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">php中文网</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>Effect output:
The above is the detailed content of How to use css box-flex attribute. For more information, please follow other related articles on the PHP Chinese website!