在企业官网开发中，元素的水平垂直居中、导航栏的自适应分布、卡片列表的等高排列，几乎都离不开 Flexbox。CSS3 引入的弹性盒模型（Flexible Box）专门解决"一维方向上的元素排列问题"，是现代布局的基石。掌握它，能让你告别 float + clearfix 的繁琐写法。

一、Flexbox 布局模型与核心概念

Flexbox 的核心是"容器"与"项目"两层结构。给父元素设置 display: flex，它就变成弹性容器，其直接子元素自动成为弹性项目。容器默认存在两根轴：主轴（main axis）是项目排列的方向，交叉轴（cross axis）与主轴垂直。

理解这两根轴是学好 Flexbox 的关键。默认情况下主轴水平向右，交叉轴垂直向下。所有对齐属性都是相对于这两根轴定义的，而非屏幕的上下左右。一旦用 flex-direction: column 切换主轴方向，justify-content 控制的就变成了垂直方向。

• flex-direction：决定主轴方向，row（默认）/ column / row-reverse / column-reverse。
• flex-wrap：是否换行，nowrap（默认不换行）/ wrap（换行）。
• justify-content：项目在主轴上的对齐方式。
• align-items：项目在交叉轴上的对齐方式。

二、主轴与交叉轴的常用属性

对齐属性是 Flexbox 用得最多的部分。justify-content 控制主轴分布，常用于导航栏均分、按钮居中等场景；align-items 控制交叉轴对齐，能让一排不等高的卡片顶端或中线对齐。

.nav {
  display: flex;
  justify-content: space-between; /* 两端对齐，中间均分 */
  align-items: center;            /* 交叉轴居中 */
  gap: 24px;                      /* 间距，替代 margin */
}

.center-box {
  display: flex;
  justify-content: center;        /* 水平居中 */
  align-items: center;            /* 垂直居中 */
  min-height: 320px;
}

项目自身也有三个关键属性，合写在 flex 简写里：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始尺寸）。日常开发中，flex: 1 是最常用的写法，表示"项目在剩余空间里等分放大"，非常适合做左右两栏自适应布局——左侧定宽，右侧 flex: 1 撑满剩余。

三、实战：导航栏与卡片网格

下面演示两个企业官网高频场景。第一个是顶部导航：logo 靠左、菜单靠右、整体垂直居中，用 space-between 一行搞定。

<header class="site-header">
  <a class="logo">尧图建站</a>
  <nav class="menu">
    <a href="knowledge.html">开发学习</a>
    <a href="cat-case.html">客户案例</a>
    <a href="contact.html">联系我们</a>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
}

第二个是产品卡片网格。用 flex-wrap: wrap 让卡片自动换行，配合 flex: 1 1 280px 实现"每行尽可能多放、宽度不少于 280px"的自适应效果，无需媒体查询即可平滑响应。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card-list .card {
  flex: 1 1 280px; /* 放大 等分 / 缩小 / 基准宽度 */
  max-width: 380px;
}

需要强调的是，Flexbox 是一维布局，擅长处理"一行"或"一列"。当你需要同时控制行和列的二维排列时，应该交给 CSS Grid。两者并非对立，而是配合使用：整体页面用 Grid 划分区域，局部组件用 Flex 处理排列，这才是现代布局的最佳实践。