flex 布局flex item 当容器变成flex布局时，内部元素就变成了flex item。flex item的布局

flex item

当容器变成flex布局时，内部元素就变成了flex item。flex item的布局脱离文档流的控制（文档流就是块级元素独占一行，行内元素从左到右排列）

flex item 的 order越大，排列越靠前。（默认order 是 0 ）所以默认 flex item 就是从左到右排列的。（LTR）

属性: flex-grow: ;
默认值: 0
特点:
- 定义了当 Flex Container 中存在 剩余空间 时，Item 是否以及如何放大。
- 值为 0 表示不放大，即使有剩余空间，也保持原有大小。
- 值大于 0 时，它会按比例分配剩余空间。例如，一个 Item 的 flex-grow 是 2，另一个是 1，那么前者获得的剩余空间是后者的两倍。

属性: flex-shrink: ;
**默认值**: 1
特点:
- 定义了当 Flex Container 的空间 不足以容纳 所有 Item 时，Item 是否以及如何收缩。
- 值为 1 (默认) 表示允许收缩。
- 值为 0 表示 **拒绝收缩**，Item 会保持其原始大小（由 flex-basis 或 width 决定），这可能导致溢出容器。
- 值大于 1 时，收缩的比例会更大。

属性: flex-basis: <length> | auto;
默认值: auto
特点:
- 定义了在分配剩余空间之前，Item 的理想或初始尺寸。
- 当值为 auto 时，它会查找 Item 的 width 或 height 属性；如果也没有，则根据内容来确定。
- 可以设置为具体的长度值，如 100px 或 50%。
- 它就像是 Item 参与空间计算前的“起跑线”。

flex basic 就是 减数,比如一个容器600px，三个flex item 宽度分别是 50px 100px 150px。 600px - 50px -100px -150px = 300px. 300/3 = 100px. 每个元素多加100px。

通常我们使用 flex 属性来同时设置这三个值：flex: ;

flex: 0 1 auto; (默认值) : 不放大，可收缩，基准尺寸由自身内容或 width 决定。
flex: 1; (等价于 1 1 0%): 这是最常用的值之一。它意味着 Item 会平均分配所有剩余空间（因为 flex-basis 是 0，所有空间都被视为“剩余空间”）。
flex: auto; (等价于 1 1 auto): Item 会放大以填充剩余空间，也会收缩以适应不足空间，但其基准尺寸是基于内容的。
flex: none; (等价于 0 0 auto): Item 完全没有弹性，既不放大也不收缩。

在 Flexbox 中，margin 属性变得异常强大，尤其是当设置为 auto 时。

特点:
- 在一个 Flex Item 上设置 margin: auto; 会吸收该方向上所有的剩余空间。
- margin-left: auto; 会将该 Item 推到容器的最右边。
- margin-right: auto; 会将该 Item 推到容器的最左边。
- margin-top: auto; 会将该 Item 推到容器的最下边（在 flex-direction: column 时更常用）。
应用场景:
- 实现分组对齐：比如导航栏中，让“登录/注册”按钮始终靠右，而其他菜单项靠左。只需给“登录/注册”按钮设置 margin-left: auto; 即可。

示例:

codeHtml

<nav class="container">
  <a>首页</a>
  <a>产品</a>
  <a>关于我们</a>
  <a style="margin-left: auto;">登录</a>
</nav>

“登录”链接会自动被推到导航栏的最右侧。