UniApp之Flex

本文深入讲解Flex布局,包括flexiblebox概念、关键属性如flex-direction、flex-wrap、justify-content及align-items的使用方法,帮助读者掌握弹性盒状布局,实现响应式设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Flex布局

  • 定义
  1. flexible box:弹性盒状布局
  2. 容器控制内部元素的布局定位
  3. 伸缩元素,自由填充,自适应
  • 常用术语:
    flex container:flex容器
    flex item:flex项目(元素)
    flex direction:布局方向
  • 属性
    flex-direction:设置元素的排列方向【row、row-reverse(从右到左)、column】
    flex-wrap:使容器内的元素换行【nowrap(不换行、压缩)、wrap(换行)】
    justify-content:设置元素在主轴上的对齐方式【flex-start(左对齐)、flex-end(右对齐)、center(居中)、space-between(等比拆分)、space-around】
    align-items:设置元素在交叉轴上的对齐方式【flex-start(左对齐)、flex-end(右对齐)、center(居中)、baseline(保证元素中的文字在同一条基准线)、stretch(拉伸)】
    align-content:设置轴线的对齐方式
    order:控制元素顺序
    flex-grow:控制元素放大比例
    flex-shrink:控制元素缩小比例
    flex-basis:设置元素固定或自动空间的占比
    slign-self:重写align-items父类属性

css引出外部样式:@import url("**.css");
upx:自适应像素单位、会根据屏幕大小计算比例

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值