Flexbox 布局中 flex-grow、flex-shrink 和 flex-basis 的用途及示例-JavaScript中文网-JavaScript教程资源分享门户

Flexbox布局是现代Web开发中非常常见的布局方式，通过一些属性的设置，可以让元素在水平或垂直方向上自适应、分布和对齐。在Flexbox布局中，flex-grow、flex-shrink和flex-basis三个属性是非常重要的，可以用来控制元素在可用空间不足或超出时的展示方式。本文将详细介绍这三个属性的用途及其示例。

flex-grow

flex-grow属性用来控制可用空间不足时元素的展示方式。它的值是一个数字，默认为0，表示元素不会自动拉伸以适应容器的可用空间。

当某个元素的flex-grow值为1时，它会尽可能地消耗多余的可用空间，直到与兄弟元素平分容器的可用空间。如果有多个元素的flex-grow值都为1，它们将平分多余的可用空间。如果某个元素的flex-grow值为2，而其它元素的flex-grow值仍为1，则这个元素将获得两倍的多余可用空间。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      height: 100px;
      justify-content: space-between;
      align-items: center;
      background-color: #eee;
    }
    .item {
      width: 80px;
      height: 80px;
      background-color: #f90;
    }
    .item:nth-child(1) {
      flex-grow: 0;
    }
    .item:nth-child(2) {
      flex-grow: 1;
    }
    .item:nth-child(3) {
      flex-grow: 2;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

在上面这个例子中，我们定义了一个三个子元素的容器，justify-content的取值为space-between，表示三个元素之间有等距离的空隙。第一个元素的flex-grow值为0，不会拉伸；第二个元素的flex-grow值为1，会尽可能地占用多余的可用空间；第三个元素的flex-grow值为2，会占用两倍的多余可用空间。

flex-shrink

flex-shrink属性用来控制元素在可用空间不足时的展示方式。它的值也是一个数字，默认为1，表示元素会在必要时自动缩小，以适应容器的宽度或高度。

当某个元素的flex-shrink值为0时，它不会缩小，即使容器的可用空间不足以容纳所有元素。如果容器的宽度或高度不够，所有的元素都会等比例缩小，直到放得下为止。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      height: 100px;
      background-color: #eee;
      justify-content: space-between;
      align-items: center;
    }
    .item {
      background-color: #f90;
    }
    .item:nth-child(1) {
      flex-shrink: 0;
      width: 150px;
    }
    .item:nth-child(2) {
      flex-shrink: 1;
      width: 150px;
    }
    .item:nth-child(3) {
      flex-shrink: 2;
      width: 150px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

在这个例子中，我们设置了三个元素，并指定每个元素的flex-shrink值，以及宽度为150像素。当页面宽度变得过小时，所有元素会等比例缩小，直到显示在容器中。

flex-basis

flex-basis属性用来设置元素在没有分配多余空间时的初始大小。它的值可以是长度、百分比或 auto，默认值是 auto。当可用空间不够时，它的值将作为元素的最小宽度或最小高度。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      height: 100px;
      background-color: #eee;
      justify-content: center;
      align-items: center;
    }
    .item {
      background-color: #f90;
      width: 50px;
    }
    /* 为第二个元素设置了 flex-basis */
    .item:nth-child(2) {
      flex-basis: 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

在这个例子中，我们设置了三个元素的容器。第一个和第三个元素都有默认的flex-basis值（auto），而第二个元素的初始宽度是200像素。

总结

flex-grow、flex-shrink和flex-basis是Flexbox布局中最常用的属性。它们分别用于控制元素在可用空间不足或超出时的展示方式。这些属性可以非常灵活地控制页面布局，使得页面能够适应不同的屏幕大小和设备类型。掌握这三个属性，将使你的前端技能更加全面，为你的Web开发带来更多的可能性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6533b67b7d4982a6eb7477d9