5个真实案例拆解：Flex布局的弹性设计精髓

刚接触Flex布局时，我们往往会被各种属性搞得晕头转向——justify-content和align-items有什么区别？flex-grow和flex-shrink到底怎么配合使用？为什么我的布局在某些屏幕尺寸下会崩坏？这些问题困扰着许多初中级前端开发者。本文将通过5个真实网页组件案例，带你逆向思考Flex属性的应用场景，建立属性与视觉效果之间的强关联。

1. 自适应导航栏：空间分配的艺术

导航栏是每个网站的门面，但让它在不同屏幕尺寸下都能优雅呈现却是个挑战。假设我们需要实现一个包含Logo和五个菜单项的导航栏，要求：

• 大屏时Logo居左，菜单项均匀分布剩余空间
• 小屏时Logo和菜单项自动收缩不换行
• 整体始终水平居中于容器

html复制<nav class="navbar">
  <div class="logo">Brand</div>
  <a href="#">Home</a>
  <a href="#">Products</a>
  <a href="#">Services</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

关键Flex配置解析：

css复制.navbar {
  display: flex;
  justify-content: space-between; /* 主轴空间分配 */
  align-items: center; /* 交叉轴居中 */
}

.logo {
  flex: 0 1 auto; /* 不扩张但允许收缩 */
}

.navbar a {
  flex: 1 0 auto; /* 允许扩张但保持基础尺寸 */
  min-width: max-content; /* 防止文字挤压 */
}

提示：当使用flex: 1时，实际是flex-grow: 1的简写，表示元素会按比例分配剩余空间。在响应式设计中，配合min-width可以避免内容被过度挤压。

2. 卡片列表：弹性换行的实战

电商网站的商品列表需要根据容器宽度自动调整每行显示数量。传统方案需要媒体查询，而Flex只需几行代码：

`