How to use css flex attribute-CSS Tutorial-php.cn

How to use css flex attribute

青灯夜游

Release： 2019-05-28 13:15:30

Original

3094 people have browsed it

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 css flex attribute

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;

Copy after login

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>

Copy after login

Rendering:

How to use css flex attribute

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!