felx布局

基本认识：

Flex布局是CSS3中新增的一种布局模式，可以方便地实现复杂的页面布局。Flex布局的主要特点是：容器和项目分别有自己的属性，并且容器内的项目可以在主轴和交叉轴上进行对齐、排列等操作。

基本概念：（什么是felx）

Flex布局是CSS3中引入的一种现代化布局模型。它可以让容器中的子元素自动改变尺寸和位置，根据父容器和子元素之间的关系来分配可用空间。相比传统的基于盒模型的布局，Flex布局更加直观、易于理解与使用。

flex布局的两个重点概念：

在Flex布局中，我们需要了解两个主要的概念：Flex容器和Flex项目。Flex容器是指被设置为display: flex或display: inline-flex的元素，即父容器。而Flex项目则是容器中的子元素，它们的行为和表现会受到Flex容器的影响。

基本结构：

在Flex布局中，有一系列用于控制容器和项目行为的属性。下面是一些常见的属性及其作用：

1. flex-direction：用于定义Flex容器中项目的排列方向，可以是row（水平排列）、column（垂直排列）、row-reverse（水平反向排列）和column-reverse（垂直反向排列）。

2. flex-wrap：用于定义Flex容器中项目是否可以换行，可以是nowrap（不换行）或wrap（换行）。

3. flex-flow：是flex-direction和flex-wrap两个属性的缩写，用于同时设置这两个属性的值。

4. justify-content：用于定义Flex容器中项目在主轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和space-around（每个项目周围的间隔相等）。

5. align-items：用于定义Flex容器中项目在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、baseline（基线对齐）和stretch（拉伸填充）。

6. align-content：用于定义Flex容器中多行项目在交叉轴上的对齐方式，当容器中只有一行项目时，该属性不起作用。可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目周围的间隔相等）和stretch（拉伸填充）。

7. flex：用于定义Flex项目的伸缩性，包含三个值：flex-grow（项目的放大比例）、flex-shrink（项目的缩小比例）和flex-basis（项目的初始大小）。

felx布局代码示例：

我们创建了一个 Flex 容器（.container）和三个 Flex 项目（.item）。Flex 容器通过display: flex来设置，这样所有的.item元素都会成为 Flex 项目。

Flex 容器通过justify-content: center和align-items: center属性来在主轴和交叉轴上居中对齐其子元素。我们还设置了容器的高度为 300px，并给其背景颜色添加了一些样式。

Flex 项目的宽度和高度通过.item类设置为 100px，并设置了margin属性来给项目之间添加一些间距。