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><div class="navbar"><button class="nav-item">Home</button><button class="nav-item">About</button><button class="nav-item">Contact</button></div>
</body></html>