深入理解 Flexbox 布局：从基础到高级用法

---

前言

Flexbox（弹性盒子布局）是 CSS3 引入的一种布局模式，旨在提供更灵活、更强大的布局方式。Flexbox 适用于一维布局，无论是水平还是垂直方向，都能轻松应对。本文将详细介绍 Flexbox 的基本概念、常用属性及其高级用法，并通过具体示例展示如何在实际项目中应用 Flexbox。

---

一、Flexbox 基础概念

Flexbox 由两个主要部分组成：容器（Container）和项目（Item）。容器是包含 Flex 项目的父元素，项目则是容器内的子元素。

1.1 容器属性

• display: 设置容器为 Flex 容器。
• flex-direction: 定义主轴的方向（行或列）。
• flex-wrap: 定义项目是否换行。
• justify-content: 定义项目在主轴上的对齐方式。
• align-items: 定义项目在交叉轴上的对齐方式。
• align-content: 定义多行项目在交叉轴上的对齐方式。

1.2 项目属性

• order: 定义项目的排列顺序。
• flex-grow: 定义项目的放大比例。
• flex-shrink: 定义项目的缩小比例。
• flex-basis: 定义项目在主轴上的初始长度。
• align-self: 定义单个项目在交叉轴上的对齐方式。

二、基本语法

2.1 创建Flex容器

要将一个元素设置为 Flex 容器，只需将其 display 属性设置为 flex。

.container {
   
  display: flex;
}

2.2 主轴方向

flex-direction 属性用于定义主轴的方向，可以是 row（默认值）、row-reverse、column 或 column-reverse。

属性值	解释说明
row	默认值，从左到右
row-reverse	从右到左
column	从上到下 (纵轴)
column-reverse	从下到上

.container {
   
  display: flex;
  flex-direction: row; /* 默认值，水平排列 */
}

2.3 项目换行

flex-wrap 属性用于定义项目是否换行，可以是 nowrap（默认值，不换行）、wrap 或 wrap-reverse。

属性值	解释说明
nowrap	默认值，不换行
wrap	换行
wrap-reverse	反转换行排列的方向‌

.container {
   
  display: flex;
  flex-wrap: wrap; /* 项目换行 */
}

2.4 项目对齐

justify-content 属性用于定义项目在主轴上的对齐方式，可以是 flex-start（默认值）、flex-end、center、space-between 或 space-around。

属性值	解释说明
flex-start	默认值，从左到右
flex-end	从右到左
center	子项在主轴上居中
space-around	让子项平均分配父项的空间
space-between	先两边贴边，在让子项平均分配剩余空间

.container {
   
  display: flex;
  justify-content: center; /* 项目居中对齐 */
}

<