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 速查表和示例。

总结

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

相关推荐
笨笨狗吞噬者38 分钟前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_916008892 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915106322 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者82 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_915106322 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921439 小时前
Charles 抓包 HTTPS 原理详解,从 CONNECT 到 SSL Proxying、常见问题与真机调试实战(含 Sniffmaster 补充方案)
android·网络协议·小程序·https·uni-app·iphone·ssl
卷Java9 小时前
WXML 编译错误修复总结
xml·java·前端·微信小程序·uni-app·webview
落叶霞枫10 小时前
【uniapp安卓原生语言插件】之华为统一扫码插件【保姆级】开发教程。
android·uni-app·android studio
Q_Q196328847512 小时前
python+springboot+uniapp基于微信小程序的巴马旅居养老系统 旅游养老小程序
spring boot·python·小程序·django·flask·uni-app·node.js