Home >Web Front-end >CSS Tutorial >How to use css flex attribute
How to use css flex attribute
- 青灯夜游Original
- 2019-05-28 13:15:303127browse
The flex property is a shorthand property of CSS, used to set or retrieve how the child elements of the flex box model object allocate space. The flex property has no effect if the element is not a child of the flexbox model object.
How to use the css flex attribute?
The flex property is used to set or retrieve how the child elements of the flex box model object allocate space.
Description: The flex property is the shorthand property for the flex-grow, flex-shrink and flex-basis properties.
CSS syntax
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Attribute value:
●flex-grow: A number that specifies that the item will be relative to other Flexible project expansion.
● flex-shrink: A number that specifies the amount the item will shrink relative to other flexible items.
● flex-basis: The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.
●auto: The element will be sized according to its own width and height, but will stretch itself to absorb the extra free space in the flex container, and will also shorten to its minimum size to fit in the container. This is equivalent to setting the property to "flex: 1 1 auto".
● none: The element will be sized according to its own width and height. It is completely inelastic and will neither shorten nor stretch to fit the flex container. Equivalent to setting the property to "flex: 0 0 auto".
● initial sets this property to its default value, which is "flex: 0 1 auto".
● inherit Inherit this attribute from the parent element.
Note: If the element is not a child element of the flexbox model object, the flex attribute has no effect.
css flex attribute example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
</body>
</html>Rendering:
The above is the detailed content of How to use css flex attribute. For more information, please follow other related articles on the PHP Chinese website!