Flex布局，全称是Flexible Box布局，是CSS3中用于布局的一种新方式。它可以让容器灵活地适应屏幕大小和子元素的数量，极大地简化了布局过程。本文将带你从Flex布局的基础概念开始，逐步深入到实战应用，并对单位设置进行详细解析。
Flex布局基础
1. Flex容器与Flex项目
在Flex布局中，容器（flex container）是指使用display: flex;或display: inline-flex;声明的元素。容器内的所有子元素（flex items）默认成为容器成员，并自动具有弹性。
2. 主轴与交叉轴
Flex容器有两个轴：主轴（main axis）和交叉轴（cross axis）。主轴是Flex项目的放置方向，交叉轴是垂直于主轴的方向。
3. 主轴与交叉轴的方向
默认情况下，主轴为水平方向，交叉轴为垂直方向。但可以通过flex-direction和flex-wrap属性来改变。
Flex布局实战
1. Flex项目排列
通过justify-content属性，可以控制Flex项目在主轴上的排列方式，如：flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔都相等）等。
2. Flex项目对齐
通过align-items属性，可以控制Flex项目在交叉轴上的对齐方式，如：flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、center（交叉轴的中点对齐）等。
3. Flex项目顺序
通过order属性，可以改变Flex项目的顺序，数值越小，越靠前。
单位设置解析
在Flex布局中，单位设置主要包括以下几种：
1. 像素（px）
像素是最常用的单位，表示屏幕上的一个点。在Flex布局中，像素可以用于设置Flex项目的宽度、高度、边距等。
2. 百分比（%）
百分比是相对于父元素的尺寸来设置的。在Flex布局中，百分比可以用于设置Flex项目的宽度、高度、边距等。
3. em
em是相对于当前元素的字体大小的单位。在Flex布局中，em可以用于设置Flex项目的宽度、高度、边距等。
4. rem
rem是相对于根元素（html）的字体大小的单位。在Flex布局中，rem可以用于设置Flex项目的宽度、高度、边距等。
5. vh和vw
vh和vw是视口单位，分别表示视口高度的百分比和视口宽度的百分比。在Flex布局中，vh和vw可以用于设置Flex项目的宽度、高度、边距等。
总结
Flex布局是一种非常强大的布局方式，能够轻松实现复杂的布局效果。通过本文的介绍，相信你已经对Flex布局有了基本的了解。在实际应用中，可以根据需求灵活运用各种单位设置，实现更加美观、实用的布局效果。