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

How to use css flex-grow attribute

藏色散人

Release： 2019-05-27 16:13:08

Original

3942 people have browsed it

css The flex-grow property is used to set or retrieve the expansion ratio of the flex box. The CSS syntax is flex-grow: number|initial|inherit; if the element is not an element of the flex box object, the flex-grow property has no effect.

How to use css flex-grow attribute

How to use the css flex-grow attribute?

Definition and usage

The flex-grow property is used to set or retrieve the expansion ratio of the flex box.

Note: If the element is not an element of the flexbox object, the flex-grow property has no effect.

Default: 0

Inherited: No

Animatable: Yes.

Version: CSS3

JavaScript Syntax:

object.style.flexGrow="5"

Copy after login

CSS Syntax:

flex-grow: number|initial|inherit;

Copy after login

Property Value

number A number that specifies the amount by which the item will expand relative to other flexible items. The default value is 0.

initial Sets this property to its default value.

inherit Inherits this property from the parent element.

Example

Make the second element three times as wide as the other elements:

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>

</body>
</html>

Copy after login

Effect:

How to use css flex-grow attribute

The above is the detailed content of How to use css flex-grow attribute. For more information, please follow other related articles on the PHP Chinese website!