Vue3+Vite+Vant-UI 开发双端招聘APP[完整]

download：Vue3+Vite+Vant-UI 开发双端招聘APP

Flex布局技术是一种使用CSS3的新特性来实现页面元素的灵活排列和对齐的方法。它可以让我们更容易地创建响应式的网页布局，适应不同的屏幕尺寸和设备类型。本文将介绍Flex布局技术的基本概念和常用属性，以及一些实际的应用示例。

Flex布局技术的基本概念 Flex布局技术的核心是将一个容器元素（称为flex容器）设置为display: flex或display: inline-flex，这样它的所有直接子元素（称为flex项目）就会自动成为弹性盒子，可以按照一定的规则在容器内排列和对齐。Flex容器有两个轴：主轴（main axis）和交叉轴（cross axis），它们决定了flex项目在容器内的方向和位置。主轴的方向可以通过flex-direction属性来指定，有四个可能的值：row（水平从左到右，默认值）、row-reverse（水平从右到左）、column（垂直从上到下）和column-reverse（垂直从下到上）。交叉轴则垂直于主轴，它的方向取决于主轴的方向。例如，如果主轴是水平方向，那么交叉轴就是垂直方向；如果主轴是垂直方向，那么交叉轴就是水平方向。

Flex容器还有两个端点：主轴起点（main start）和主轴终点（main end），以及交叉轴起点（cross start）和交叉轴终点（cross end）。它们分别表示了flex项目在容器内沿着两个轴的开始和结束的位置。这些端点的具体位置取决于文档的书写模式（writing mode）。例如，在左到右书写模式下，主轴起点就是容器的左边缘，主轴终点就是容器的右边缘；在右到左书写模式下，主轴起点就是容器的右边缘，主轴终点就是容器的左边缘。交叉轴起点和终点则与书写模式无关，始终是容器的上边缘和下边缘。

Flex项目在容器内沿着主轴排列，每一行或列称为一个flex行（flex line）。如果flex项目在一行或列内无法全部显示，那么可以通过flex-wrap属性来控制是否换行或换列。flex-wrap属性有三个可能的值：nowrap（不换行或换列，默认值）、wrap（换行或换列）和wrap-reverse（反向换行或换列）。如果设置为wrap或wrap-reverse，那么每个flex行都可以看作一个新的flex容器，拥有自己的主轴和交叉轴。

Flex项目在容器内沿着两个轴的对齐方式可以通过以下几个属性来控制：

justify-content：用于指定flex项目在主轴上的对齐方式，有以下几个可能的值： flex-start：沿着主轴起点对齐 flex-end：沿着主轴终点对齐 center：沿着主轴中心对齐 space-between：两端对齐，项目之间的间隔相等 space-around：每个项目两侧的间隔相等 align-items：用于指定flex项目在交叉轴上的对齐方式，有以下几个可能的值： stretch：拉伸项目以填充交叉轴空间（默认值） flex-start：沿着交叉轴起点对齐 flex-end：沿着交叉轴终点对齐 center：沿着交叉轴中心对齐 baseline：沿着项目的第一行文字的基线对齐 align-content：用于指定多个flex行在交叉轴上的对齐方式，有以下几个可能的值： stretch：拉伸行以填充交叉轴空间（默认值） flex-start：沿着交叉轴起点对齐 flex-end：沿着交叉轴终点对齐 center：沿着交叉轴中心对齐 space-between：两端对齐，行之间的间隔相等 space-around：每个行两侧的间隔相等 Flex项目还可以通过以下几个属性来控制自身的大小和顺序：

flex-basis：用于指定flex项目在主轴上的初始大小，可以是一个固定的长度值，也可以是auto（表示根据内容自动调整）或content（表示根据内容自动调整，但不考虑最大最小限制） flex-grow：用于指定flex项目在主轴上的放大比例，如果所有项目的flex-grow都为0（默认值），那么即使有多余的空间，也不会放大；如果有一个或多个项目的flex-grow不为0，那么它们会按比例分配剩余的空间 flex-shrink：用于指定flex项目在主轴上的缩小比例，如果所有项目的flex-shrink都为0，那么即使空间不足，也不会缩小；如果有一个或多个项目的flex-shrink不为0，那么它们会按比例缩小以适应空间 flex：用于简写flex-basis、flex-grow和flex-shrink三个属性，可以取以下几个值： auto：等同于 1 0 auto none：等同于 0 0 auto 一个无单位的正数：等同于该数 1 0 一个长度值：等同于 0 1 该值 order：用于指定flex项目在容器内的排列顺序，可以是任意整数，默认为0，数值越小，排列越靠前 Flex布局技术的常用属性示例 下面我们通过一些简单的示例来展示Flex布局技术的常用属性的效果。我们假设有一个包含三个子元素（分别为A、B、C）的容器元素（称为box），并且给它们添加了一些辅助样式以便观察。

HTML代码：

CSS代码：

.box { display: flex; }

.item { width: 100px; height: 100px; line-height: 100px; text-align: center; }

.item:nth-child(1) { background-color: red; }

.item:nth-child(2) { background-color: green; }

.item:nth-child(3) { background-color: blue; }

效果如下：

!image)

接下来我们分别修改容器元素和子元素上的一些Flex布局技术相关的属性，并观察效果。

修改容器元素上的flex-direction属性，改变主轴方向： .box { display: flex; flex-direction: column; }

效果如下：

!image)