uni-app 布局之 Flex

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 的理解相对简单很多,就是看哪个数值大,越大越往后排就好了

效果图

二、快速学习技巧

Flexbox Froggy 游戏化学习 Flex 属性
CSS-Tricks Flex Guide 速查表和示例。

总结

先掌握容器和项目的核心属性,再通过实践熟悉常用布局模式

相关推荐
ᥬ 小月亮4 小时前
uniapp中输入金额的过滤(只允许输入数字和小数点)
前端·css·uni-app
织_网10 小时前
uniApp App 嵌入 H5 全流程:通信与跳转细节拆解
uni-app
2501_9160088911 小时前
uni-app iOS 应用版本迭代与上架实践 持续更新的高效流程
android·ios·小程序·https·uni-app·iphone·webview
织_网13 小时前
uniApp 混合开发全指南:原生与跨端的协同方案
uni-app
2501_9159090613 小时前
uni-app iOS 性能监控与调试全流程:多工具协作的实战案例
android·ios·小程序·https·uni-app·iphone·webview
ikun778g1 天前
uniapp使用uview UI,自定义级联选择组件
前端·前端框架·uni-app
草字1 天前
uniapp 优博讯k329蓝牙打印机,设置打印机,一键打印
开发语言·javascript·uni-app
快起来搬砖了1 天前
Uniapp 图片前端上传功能实现与详解
前端·uni-app
编程猪猪侠2 天前
使用uni-app和Canvas生成简易双列表格布局并长按下载到本地
uni-app