flex：1 - 技术栈

1.flex-grow:1,

现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，

上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);

如何让下面盒子的子盒子高度适应外部的高度呢？

答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。

2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 1px solid black;
      /* 较窄的容器，不足以容纳两个子元素 */
      overflow: hidden;
      /* 隐藏超出容器的内容 */
    }

    .item {
      background-color: lightblue;
      padding: 10px;
      margin: 5px;
    }

    .no-shrink {
      flex-shrink: 0;
      /* 不缩小 */
    }

    .shrink {
      flex-shrink: 1;
      /* 默认值，可以缩小 */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item no-shrink">No Shrink (Short)</div>
    <div class="item shrink">Shrink (Long Text to Demonstrate Shrink)</div>
  </div>
</body>

</html>

3.flex-basis:0% 表示元素应该尽可能地小，以便分配额外空间

flex-basis:100%表示他占比整个宽度的100%

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 1px solid black;
      overflow: hidden;
      /* 隐藏超出容器的内容 */
    }

    .item {
      background-color: lightblue;
      padding: 10px;
      margin: 5px;
      /* box-sizing: border-box; */
      /* 包含内边距和边框在总宽度中 */
    }

    .half-width {
      flex-basis: 100%;
      /* 占用容器宽度的一半 */
    }

    .fixed-width {
      flex-basis: 20px;
      /* 固定宽度 */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item half-width">Half Width Item (50%)</div>
    <div class="item fixed-width">Fixed Width Item (200px)</div>
  </div>
</body>

</html>

4.flex: 1; 是一个非常常用的简写属性，用于在 Flexbox 布局中使子元素自动填充容器的可用空间,

每个 .nav-item 都设置为 flex: 1;，这意味着它们将自动填充 .navbar 中的剩余空间，并且在容器宽度变化时等分空间。

flex-grow: 1; - 定义了元素如何分配额外的空间。如果所有子元素都有相同的正数 flex-grow 值，它们将会平均分配剩余空间。
flex-shrink: 1; - 定义了元素如何减少其大小以避免溢出。在这个上下文中，1 是一个默认值，表示元素可以缩小。（但是会造成高度的变化，属于flex的默认属性）
flex-basis: 0%; - 定义了元素在分配额外空间前的初始大小。0% 表示元素应该尽可能地小，以便分配额外空间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .navbar { display: flex; /* 分布子元素 */ padding: 10px; background-color: #f0f0f0; border: 1px solid black; }
复制代码
```
  .nav-item {
    flex: 1;
    /* 自动填充剩余空间 */
    background-color: #ddd;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    cursor: pointer;
    border: 1px solid red;
  }
</style>
```
</head> <body>
<button class="nav-item">Home</button> <button class="nav-item">About</button> <button class="nav-item">Contact</button>
</body> </html>