深入理解CSS中flex布局的三个核心属性order、flex-grow、flex-shrink

前端

2023-11-01 09:33:30

flex布局中的order属性

order属性定义了项目在弹性容器中的排列顺序。数值越小，排列越靠前。默认值为0。

如果两个或多个项目具有相同的order值，则它们将按照在HTML中出现的顺序排列。

order属性可以用于创建自定义的排列顺序，例如将重要的项目放在前面，或者将次要项目放在后面。

flex布局中的flex-grow属性

flex-grow属性定义了项目在弹性容器中放大（或伸展）的比例。默认值为0，即如果存在剩余空间，也不放大。

如果两个或多个项目具有相同的flex-grow值，则它们将按比例放大，直到填满剩余空间。

flex-grow属性可以用于创建弹性布局，例如使项目在窗口大小改变时自动调整大小。

flex布局中的flex-shrink属性

flex-shrink属性定义了项目在弹性容器中缩小（或收缩）的比例。默认值为1，即如果空间不足，该项目将缩小。

如果两个或多个项目具有相同的flex-shrink值，则它们将按比例缩小，直到达到其最小宽度或高度。

flex-shrink属性可以用于创建响应式布局，例如使项目在窗口大小改变时自动调整大小。

实例演示

以下示例演示了order、flex-grow和flex-shrink属性的用法：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }

    .item1 {
      order: 1;
      flex-grow: 1;
      flex-shrink: 1;
      background-color: red;
    }

    .item2 {
      order: 2;
      flex-grow: 2;
      flex-shrink: 2;
      background-color: green;
    }

    .item3 {
      order: 3;
      flex-grow: 3;
      flex-shrink: 3;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
  </div>
</body>
</html>