flex-grow
Lesson 14 of 15 in Coddy's CSS Flexbox - The Complete Course course.
The flex-grow property defines the ability of a flex item to grow (if necessary).
It accepts a number that serves as a proportion.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others.
Example,
.item {
flex-grow: 4;
}The default value is 0, negative numbers are invalid.
Challenge
EasyYou are given a flexbox with three flex items, make the middle flex item grow twice as much as the two on the sides.
You should give
flex-growproperty to all the items.
Try it yourself
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>