CSS（6） - 技术栈

Flex 弹性盒子布局

一、Flex 布局基础概念

Flex 布局是 CSS3 中一种强大的布局方式，2009年由 W3C 提出，2012年成为正式标准。它能够简便、完整、响应式地实现各种页面布局。

核心概念

容器 (Flex Container) ：设置 display: flex 的元素
项目 (Flex Item)：容器的直接子元素
主轴 (Main Axis)：项目排列的主要方向
交叉轴 (Cross Axis)：与主轴垂直的方向

二、容器属性

1. display: flex

css 复制代码

.container {
  display: flex; /* 或 inline-flex */
}

2. flex-direction (主轴方向)

css 复制代码

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

复制代码

3. flex-wrap (换行方式)

css 复制代码

.container {
  flex-wrap: nowrap; /* 默认不换行 */
  flex-wrap: wrap; /* 换行，第一行在上 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下 */
}

复制代码

4. justify-content (主轴对齐)

css 复制代码

.container {
  justify-content: flex-start; /* 默认值，左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 居中 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around; /* 均匀分布 */
  justify-content: space-evenly; /* 完全均匀 */
}

复制代码

5. align-items (交叉轴对齐)

css 复制代码

.container {
  align-items: stretch; /* 默认值，拉伸填满 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: center; /* 居中对齐 */
  align-items: baseline; /* 基线对齐 */
}

复制代码

6. align-content (多行对齐)

css 复制代码

.container {
  align-content: stretch; /* 默认值 */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
}

复制代码

三、项目属性

1. order (排列顺序)

css

复制代码

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

2. flex-grow (放大比例)

css

复制代码

.item {
  flex-grow: 0; /* 默认不放大 */
}

3. flex-shrink (缩小比例)

css

复制代码

.item {
  flex-shrink: 1; /* 默认可缩小 */
}

4. flex-basis (初始大小)

css 复制代码

.item {
  flex-basis: auto; /* 默认值 */
  flex-basis: 100px; /* 固定宽度 */
}

复制代码

5. flex (简写)

css 复制代码

.item {
  flex: none; /* 0 0 auto */
  flex: auto; /* 1 1 auto */
  flex: 1; /* 1 1 0% */
}

复制代码

6. align-self (单独对齐)

css 复制代码

.item {
  align-self: auto; /* 默认继承父级 */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

复制代码

四、实际应用案例

1. 水平垂直居中

css 复制代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

复制代码

2. 圣杯布局

css 复制代码

.container {
  display: flex;
  flex-direction: column;
}
.header, .footer {
  flex: 0 0 60px;
}
.content {
  flex: 1;
  display: flex;
}
.main {
  flex: 1;
}
.aside {
  flex: 0 0 200px;
}

复制代码

3. 响应式导航栏

css 复制代码

.nav {
  display: flex;
  flex-wrap: wrap;
}
.nav-item {
  flex: 1 0 120px;
}

复制代码

五、Flex 布局优势

简单易用：相比浮动和定位更直观
响应式友好：轻松适应不同屏幕尺寸
空间分配灵活：自动计算剩余空间
对齐方式丰富：多种对齐选项
顺序控制：可随意调整项目顺序

CSS 元素水平垂直居中的方法

1. margin:auto 方法（绝对定位）

css 复制代码

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

特点：

需要指定元素的宽高
必须使用绝对定位
兼容性好（包括旧版浏览器）
父元素需要有定位上下文（relative/absolute/fixed）

2. 定位 + transform 平移方法

css 复制代码

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

特点：

不需要知道元素的具体尺寸
使用百分比平移实现精确居中
兼容IE9+
同样需要父元素有定位上下文

3. Flexbox 弹性盒子方法（现代推荐）

css 复制代码

.father {
  display: flex;
  height: 100vh; /* 或任意高度 */
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

特点：

最简单现代的解决方案
不需要知道子元素尺寸
支持响应式布局
兼容IE10+
不需要定位上下文

方法	需要固定尺寸	兼容性	响应式	适用场景
margin:auto	是	所有	一般	已知尺寸元素的传统方案
定位+transform	否	IE9+	优秀	未知尺寸元素居中
Flexbox	否	IE10+	优秀	现代布局首选