Flex 弹性布局学习总结

一、Flex 布局核心概念

学习 Flex 布局，首先要理清两个核心角色和两个轴线：

容器（Flex Container） ：设置display: flex的父元素，所有子元素会成为弹性项。
项目（Flex Item）：容器内的子元素，会遵循 Flex 布局规则排列。
主轴（Main Axis） ：默认水平方向（从左到右），可通过flex-direction修改方向。
交叉轴（Cross Axis）：垂直于主轴的方向（默认垂直方向）。

二、Flex 容器核心属性

1. 基础开启：display: flex

这是使用 Flex 布局的第一步，给父元素设置display: flex后，子元素立即变为弹性项，默认沿主轴水平排列。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>容器flex</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      display: flex; /* 开启弹性布局 */
      width: 500px;
      height: 500px;
      border: 4px solid rgb(135, 71, 71);
    }
    .main .son1 {
      width: 100px;
      background-color: pink;
    }
    .main .son2 {
      background-color: skyblue;
    }
    .main .son3 {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="son1">1</div>
    <div class="son2">2</div>
    <div class="son3">3</div>
  </div>
</body>
</html>

2. 主轴方向：flex-direction

控制主轴的方向，可选值：

row（默认）：水平从左到右
row-reverse：水平从右到左
column：垂直从上到下
column-reverse：垂直从下到上

css 复制代码

.main {
  display: flex;
  flex-direction: column; /* 主轴改为垂直方向 */
  justify-content: space-between; /* 主轴对齐 */
  align-items: center; /* 交叉轴对齐 */
  width: 500px;
  height: 500px;
  border: 4px solid rgb(135, 71, 71);
}

3. 主轴对齐：justify-content

控制弹性项在主轴上的对齐方式，常用值：

flex-start：默认，靠主轴起始端对齐
flex-end：靠主轴结束端对齐
center：主轴居中对齐
space-between：两端对齐，项目之间间距相等
space-around：每个项目两侧间距相等（整体左右有留白）
space-evenly：所有间距（包括两端）完全相等

css 复制代码

.main {
  display: flex;
  justify-content: space-between; /* 主轴两端对齐 */
  width: 500px;
  height: 200px;
  border: 4px solid rgb(135, 71, 71);
}

4. 交叉轴对齐（单行）：align-items

控制单行弹性项在交叉轴上的对齐方式，常用值：

flex-start：靠交叉轴起始端
flex-end：靠交叉轴结束端
center：交叉轴居中
stretch：默认，项目未设置高度时拉伸至容器高度

css 复制代码

.main {
  display: flex;
  align-items: center; /* 交叉轴居中 */
  width: 500px;
  height: 200px;
  border: 4px solid rgb(135, 71, 71);
}

5. 强制换行：flex-wrap

默认情况下，弹性项会挤在一行，flex-wrap: wrap可让项目超出容器时自动换行：

css 复制代码

.main {
  width: 500px;
  display: flex;
  flex-wrap: wrap; /* 开启自动换行 */
  justify-content: space-between;
  border: 4px solid rgb(135, 71, 71);
}
.son {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 5px;
}

6. 交叉轴对齐（多行）：align-content

仅在flex-wrap: wrap（多行）时生效，控制多行整体在交叉轴的对齐方式，可选值与justify-content类似（start/end/center/space-between/space-around/space-evenly）：

css 复制代码

.main {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* 多行交叉轴两端对齐 */
  width: 500px;
  height: 500px;
  border: 4px solid rgb(135, 71, 71);
}

7. 间距控制：gap

简化弹性项之间的间距设置，替代传统的margin，无需处理最后一个元素的多余间距：

css 复制代码

.main {
  display: flex;
  gap: 20px; /* 项目之间的间距（水平+垂直） */
  width: 80%;
  border: 4px solid rgb(135, 71, 71);
}

8. 伸缩比例：flex

flex是flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础宽度）的简写，最常用的场景：

flex: 1：项目等分剩余空间（一行内）
flex: 0 0 16.666%：不放大、不缩小，固定宽度（多行布局常用）

css 复制代码

/* 单行等分 */
.main .son {
  flex: 1; /* 每个项目占1份剩余空间 */
  width: 100px;
  height: 100px;
  background-color: pink;
}

/* 多行固定列数（一行6列） */
.son {
  flex: 0 0 16.6666666666%; /* 不缩放，固定宽度 */
  padding: 0 8px;
  height: 120px;
  margin-bottom: 16px;
}

三、学习总结

Flex 布局的核心是 "轴" 的控制：先确定主轴方向，再通过justify-content（主轴）、align-items/align-content（交叉轴）控制对齐。
换行场景下，flex-wrap: wrap是基础，多行对齐用align-content，单行对齐用align-items。
实战中，flex: 1适合单行等分，flex: 0 0 固定比例适合多行固定列数，gap简化间距控制。
细节优化：图片底部留白可通过vertical-align: top或display: block解决。