Home >Web Front-end >CSS Tutorial >How to use css flex-grow attribute

How to use css flex-grow attribute

藏色散人Original: 2019-05-27 16:13:083941browse

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 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"

CSS Syntax:

flex-grow: number|initial|inherit;

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css flex-basis propertyNext article：How to use css flex-basis property

See more

How to use css flex-grow attribute

Related articles