flex-grow

Coddy CSS Flexbox：完整课程课程的第 14 课，共 15 课。

flex-grow 属性定义了弹性项目（如果需要）增长的能力。

它接受一个用作比例的数字。

如果所有项目的 flex-grow 都设置为 1，容器中的剩余空间就会平均分配给所有子项。如果其中一个子项的值为 2，它占用的空间将是其他任意一个子项的两倍。

例如：

.item {
  flex-grow: 4;
}

默认值为 0，负数无效。

挑战

简单

这里有一个包含三个 flex 项目的 flex 布局，请让中间的 flex 项目比两侧的项目多增长一倍。

你应该为所有项目设置 flex-grow 属性。

亲手试试

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

CSS Flexbox：完整课程中的所有课

1简介

简介容器与元素

2弹性容器

Flexbox flex-direction flex-wrap flex-flow justify-content align-items align-content gap 完美居中

3Flex 项目

子元素 orderflex-growalign-self

自己练习： Web 在线编辑器