如何用CSS Flexbox实现复杂多行与嵌套布局

CSS Flexbox是前端布局中非常实用的工具，除了基础的单行排列，它还能很好地支持复杂多行与嵌套结构的搭建，只要掌握核心属性的用法，就能应对大部分页面布局需求。

多行布局的实现

默认情况下flex容器是单行排列子元素的，要实现多行布局，首先需要设置flex-wrap属性，它有三个常用取值：

• nowrap：默认值，不换行，子元素会被压缩到一行内
• wrap：换行，第一行在上方，超出容器宽度的子元素会排到下一行
• wrap-reverse：换行，第一行在下方，排列顺序和wrap相反

当开启换行后，还可以用align-content属性调整多行之间的对齐方式，该属性只在多行场景下生效，常用取值如下：

下面是一个多行卡片布局的示例代码：

/* 外层flex容器，开启换行，多行居中对齐 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 16px;
  padding: 20px;
  width: 800px;
  height: 400px;
  background-color: #f5f5f5;
}

/* 卡片子元素，设置基础宽度和缩放规则 */
.card {
  flex: 0 0 180px;
  height: 120px;
  background-color: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

嵌套Flex布局的实现

嵌套布局就是在flex容器的子元素中，再将其设置为flex容器，形成多层的flex结构，适合搭建有内部排列需求的组件，比如导航栏、卡片内部布局等。

需要注意嵌套时，每一层flex容器的属性都是独立生效的，父容器的设置不会影响子容器作为flex容器时的排列规则，只需要逐层设置对应的flex属性即可。

下面是一个导航栏嵌套布局的示例，导航栏整体是flex容器，内部的logo区域和菜单区域也是flex容器：

<div class="nav">
  <div class="nav-logo">网站LOGO</div>
  <div class="nav-menu">
    <div class="menu-item">首页</div>
    <div class="menu-item">产品</div>
    <div class="menu-item">关于我们</div>
    <div class="menu-item">联系我们</div>
  </div>
</div>

/* 最外层导航容器 */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 60px;
  background-color: #333;
  color: #fff;
}

/* logo区域，也是flex容器，让文字居中 */
.nav-logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

/* 菜单外层容器，flex布局排列菜单项 */
.nav-menu {
  display: flex;
  gap: 32px;
}

/* 单个菜单项 */
.menu-item {
  cursor: pointer;
  transition: color 0.2s;
}

.menu-item:hover {
  color: #409eff;
}

注意事项

在使用Flexbox做复杂布局时，要注意flex简写属性的用法，flex: 1等价于flex: 1 1 0%，会根据剩余空间分配大小；如果是固定宽度的子元素，建议设置flex: 0 0 固定宽度，避免被意外压缩。

另外嵌套布局的层级不要过深，一般2-3层就能满足大部分需求，层级过深会增加样式维护的难度，也不利于后续调整布局结构。

CSS_Flexbox多行布局嵌套布局flex-wrapflex容器修改时间：2026-06-06 05:06:51