Flex布局中的flex-wrap属性详解

# 1. 简介

## Flex布局基础

在了解`flex-wrap`属性之前，我们首先需要对Flex布局有一个基本的了解。Flex布局是一种用于在容器中进行排版的布局方式，它可以让容器中的子元素能够自动适应空间，并且可以轻松实现各种灵活的布局效果。

Flex布局中有三个主要的概念：容器（flex container）、项目（flex item）和轴线（flex line）。通过`display: flex`或`display: inline-flex`设置父元素的display属性来创建Flex容器，然后在Flex容器内部进行布局。在Flex容器中，项目可以按照设定的规则进行排列，通常有`justify-content`、`align-items`等属性来控制项目的排列方式。

灵活使用Flex布局可以帮助我们更便捷地实现各种复杂的布局效果，为Web开发带来更多可能性。

### Flex布局基础

在了解flex-wrap属性之前，我们先来回顾一下Flex布局的基础知识。Flex布局是一种用于实现页面布局的技术，它可以让容器中的子元素能够自动排列，并且可以动态地调整它们的大小和位置。

在Flex布局中，有三个重要的概念：容器（flex container）、项目（flex item）和轴（flex axis）。容器是指应用了Flex布局的父元素，项目是指容器中的子元素，而轴则分为主轴（main axis）和交叉轴（cross axis），它们决定了项目的排列方式和对齐方式。

主轴的方向由flex-direction属性决定，它可以是水平方向（row）或垂直方向（column）。而交叉轴则是与主轴垂直的轴。

在Flex布局中，我们可以使用一系列的属性来控制容器和项目的排列方式，包括justi