当前位置：首页 > news >正文

uni-app 布局之 Flex

news 2025/9/4 19:28:12

Flex 是 Flexible Box 的缩写，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来布置、对齐和分配容器中项目之间的空间。意为"弹性布局"，用来为盒状模型提供最大的灵活性。Flexbox 包含 flex 容器和 flex 成员项，为支持跨平台，框架建议使用 Flex 布局

备注：在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性

为更直观表述 flex，下面的图片以供参考高清下载地址： css-flexbox

一、属性

flex-direction

定义了 flex 容器中 flex 成员项的排列方向，默认值为 column

效果图：

flex-wrap

决定了 flex 成员项在一行还是多行分布，默认值为nowrap

效果图

justify-content

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start

效果图

align-items

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。

效果图

align-content

定义了浏览器如何在 flex 容器中，按照“交叉轴”的方向去分配每个 flex 元素之间以及与 flex 容器之间的空间。

效果图

flex-shrink,flex-grow, flex-basis

是控制 Flex 项目（flex items）如何分配容器空间的三个核心属性。它们通常通过 flex 简写属性一起设置，但也可以单独使用

效果图

align-self

align-self 是一个用于控制单个 Flex 项目在交叉轴上对齐方式的属性。它是 align-items 的单个项目版本，允许覆盖容器级别的对齐设置，实现更精细的布局控制。

效果图

order

order 属性规定了 flex 元素在 flex 容器中布局时的顺序。在未设置任何 order 属性值或者设置了相同的 order 属性值时，会以元素在 dom 节点中出现的顺序进行布局；而如果我们修改了 order 的属性值，就将会以递增的方式排序，数字越大，flex 元素就排得越后面。order 属性仅仅只是将 flex 元素在页面展示时的视觉效果做了位置的调整，并不会改变其自身在 dom 节点的位置以及顺序。属性值可以为负值，只要是整数就可以了 ,order 的理解相对简单很多，就是看哪个数值大，越大越往后排就好了