布局与响应式设计-第11章-11.1-Flex核心概念

一、学习目标

• 理解Flexbox布局模型的核心设计思想
• 掌握容器、项目、主轴、交叉轴的定义及关系
• 区分Flexbox与传统布局方案的本质差异

二、概念讲解

Flexbox（弹性盒子布局）是CSS3引入的一维布局模型，通过定义容器与项目之间的关系实现灵活的空间分配和对齐控制。与传统布局（如浮动、定位）相比，Flexbox具有以下核心优势：

• 无需手动计算尺寸：自动分配剩余空间
• 天然支持垂直居中：简化对齐实现
• 自适应容器变化：动态调整项目大小和位置

核心术语体系

传统布局痛点对比

三、语法基础

启用Flexbox

通过为父元素设置display: flex或display: inline-flex启用Flex布局：

/* 块级Flex容器 */
.flex-container {
  display: flex; /* 容器将占据整行宽度 */
}

/* 行内Flex容器 */
.inline-flex-container {
  display: inline-flex; /* 容器宽度由内容决定 */
}

主轴与交叉轴方向控制

通过flex-direction属性设置主轴方向，间接决定交叉轴方向：

.container {
  display: flex;
  flex-direction: row; /* 默认值：主轴水平从左到右，交叉轴垂直从上到下 */
  /* flex-direction: column; 主轴垂直从上到下，交叉轴水平从左到右 */
  /* flex-direction: row-reverse; 主轴水平从右到左 */
  /* flex-direction: column-reverse; 主轴垂直从下到上 */
}

四、实战示例

基础示例：创建Flex容器与项目

<div class="flex-container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.flex-container {
  display: flex; /* 启用Flex布局 */
  width: 600px;
  height: 200px;
  background: #f5f5f5;
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}
</style>

效果说明：3个项目将沿水平方向（主轴）排列，容器自动包含所有项目，无需清除浮动。

进阶示例：主轴方向切换

.flex-container {
  display: flex;
  flex-direction: column; /* 主轴改为垂直方向 */
  height: 400px; /* 垂直布局需设置容器高度 */
}

效果变化：项目将沿垂直方向排列，宽度默认拉伸填满容器（后续章节详解）。

五、注意事项

1. 浏览器兼容性：

   • 支持所有现代浏览器（Chrome 29+、Firefox 28+、Edge 12+）
   • IE11部分支持，需添加-ms-前缀（如display: -ms-flexbox）

2. 项目默认行为：

   • 项目默认不换行（flex-wrap: nowrap）
   • 项目默认沿主轴方向拉伸以填充空间（flex: 0 1 auto）

3. 与Grid布局的区别：

   • Flexbox是一维布局（单行或单列）
   • Grid是二维布局（多行多列），适合整体页面布局
   • 两者可组合使用（如Grid容器内嵌套Flex项目）

六、自测题

1. Flexbox布局中，哪个属性用于设置主轴方向？

   • A. justify-content
   • B. flex-direction
   • C. align-items
     答案：B

2. 如何将Flex项目沿垂直方向排列？

   • A. flex-direction: column
   • B. flex-direction: row
   • C. align-items: column
     答案：A

3. Flex容器设置display: flex后，子元素的默认排列方式是？

   • A. 垂直排列，从上到下
   • B. 水平排列，从左到右
   • C. 水平排列，从右到左
     答案：B