css flex布局 —— 项目属性 flex-grow

最新推荐文章于 2025-03-22 20:24:59 发布

＊且听风吟

最新推荐文章于 2025-03-22 20:24:59 发布

阅读量3.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # CSS 文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/HH18700418030/article/details/126995969

本文详细介绍了CSS flex布局中的flex-grow属性，包括其默认值、正整数、小数以及小数与正整数组合的用法，通过实例展示了如何分配多余空间，帮助理解其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex-grow 属性定义项目的放大比例，解决的问题是：在空间有多余时把多余空间分配给各个子元素。

flex-grow 的值默认为 0，也就是说，如果存在剩余空间，也不放大。

flex-grow 取值为非负数（如果取值为负数那么和0的取值效果相同）。

语法

.item {
   
   
  flex-grow: <number>; /* default 0 */
}

`flex-grow` 默认为0

flex-grow 默认为 0 时：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
   
   
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 200px;
      background-color: #e6e6e6;
    }
    .item {
   
   
      width: 50px;
      height: 50px;
    }
    .container div:nth-of-type(1) {
   
   background-color:coral;}
    .container div:nth-of-type(2) {
   
   background-color:lightblue;}
    .container div:nth-of-type(3) {
   
   background-color:khaki;}
    .container div:nth-of-type(4) {
   
   background-color:pink;}
    .container div:nth-of-type(5) {
   
   background-color:lightgrey;}
    .container div:nth-of-type(6) {
   
   background-color:orange;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div&g