flex布局是什么Flexbox（弹性盒子布局）是CSS3中一种一维布局模型，专门设计用来更高效地处理容器内项目的对齐、

Flexbox（弹性盒子布局）是CSS3中一种一维布局模型，专门设计用来更高效地处理容器内项目的对齐、方向和顺序，即使它们的大小未知或动态变化。

核心概念

1. 容器与项目

Flex容器：设置 display: flex 或 display: inline-flex 的元素
Flex项目：Flex容器的直接子元素

<div class="container">  <!-- Flex容器 -->
  <div class="item">项目1</div>  <!-- Flex项目 -->
  <div class="item">项目2</div>  <!-- Flex项目 -->
  <div class="item">项目3</div>  <!-- Flex项目 -->
</div>

主轴与交叉轴

主轴（main axis）：项目排列的主要方向
交叉轴（cross axis）：垂直于主轴的方向

Flex容器属性

1. 布局方向

.container {
  display: flex;
  flex-direction: row; /* 默认值，水平排列（从左到右） */
  /* 可选值：
     row-reverse - 水平反向（从右到左）
     column - 垂直排列（从上到下）
     column-reverse - 垂直反向（从下到上）
  */
}

2. 换行控制

.container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  /* 可选值：
     wrap - 换行
     wrap-reverse - 反向换行
  */
  
  /* 简写形式 */
  flex-flow: row wrap; /* flex-direction 和 flex-wrap 的组合 */
}

3. 主轴对齐方式

.container {
  justify-content: flex-start; /* 默认值，从主轴起点开始 */
  /* 可选值：
     flex-end - 从主轴终点开始
     center - 居中
     space-between - 两端对齐，项目间间隔相等
     space-around - 每个项目两侧间隔相等
     space-evenly - 所有间隔（包括两端）完全相等
  */
}

4. 交叉轴对齐方式

.container {
  align-items: stretch; /* 默认值，拉伸填满容器 */
  /* 可选值：
     flex-start - 交叉轴起点对齐
     flex-end - 交叉轴终点对齐
     center - 交叉轴居中
     baseline - 项目的第一行文字基线对齐
  */
}

/* 多行对齐（有多行时） */
.container {
  align-content: stretch; /* 默认值 */
  /* 可选值与 justify-content 类似 */
}

Flex项目属性

1. 项目排序

.item {
  order: 0; /* 默认值，数值越小越靠前 */
}

2. 项目伸缩

.item {
  /* 三个关键属性 */
  flex-grow: 0;    /* 默认值，不放大 */
  flex-shrink: 1;  /* 默认值，空间不足时缩小 */
  flex-basis: auto; /* 默认值，项目的初始大小 */
  
  /* 简写形式 */
  flex: 0 1 auto; /* flex-grow flex-shrink flex-basis */
  flex: 1;        /* 等价于 flex: 1 1 0% */
  flex: none;     /* 等价于 flex: 0 0 auto */
}

3. 单个项目对齐

.item {
  align-self: auto; /* 默认值，继承容器的 align-items */
  /* 可选值与 align-items 相同 */
}

常用布局模式

1. 水平垂直居中（最经典）

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

2. 等分布局

.container {
  display: flex;
}

.item {
  flex: 1;  /* 所有项目等分剩余空间 */
}

3. 固定侧边栏 + 自适应内容

.container {
  display: flex;
}

.sidebar {
  flex: 0 0 200px;  /* 固定200px，不伸缩 */
}

.content {
  flex: 1;          /* 占满剩余空间 */
}

4. 圣杯布局

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex: 0 0 auto;
}

.content {
  flex: 1;
  display: flex;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

实际应用示例

<style>
  /* 导航栏 */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #333;
    color: white;
  }

  /* 卡片网格 */
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .card {
    flex: 1 1 300px; /* 最小300px，可伸缩 */
    max-width: 400px;
  }

  /* 表单布局 */
  .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .form-group {
    flex: 1;
  }
</style>

<div class="navbar">
  <div class="logo">Logo</div>
  <nav>
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于</a>
  </nav>
  <button>登录</button>
</div>

浏览器支持

现代浏览器：完全支持
IE10/11：部分支持（需要加 -ms- 前缀）
IE9及以下：不支持

与Grid布局的区别

特性	Flexbox	Grid
维度	一维布局	二维布局
方向	只能处理行或列	可同时处理行和列
用途	组件内布局、线性布局	页面整体布局、复杂网格
灵活性	项目可伸缩	单元格固定或可伸缩

最佳实践

优先使用Flexbox处理一维布局
使用简写属性保持代码简洁
注意flex项目的默认最小宽度
结合媒体查询实现响应式
必要时使用 flex-shrink: 0 防止内容压缩

Flexbox是现代Web开发中最重要、最常用的布局技术之一，特别适合构建复杂但灵活的界面组件。