用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

[微信小程序]入门学习知识点_UI布局

Rolan 2017-7-29 00:07

工具微信web开发者工具(当前版本0.18.182100)Flex布局设置display : flexflex-flowrow(默认行显示)/column(列显示)nowarp(默认不自动换行)/warp(自动换行)/reverse(反转,在换行时有效)简写示例:flex-flow : row warp ...

工具

  • 微信web开发者工具(当前版本0.18.182100)

Flex布局

设置display : flex

  • flex-flow

    row(默认行显示)/column(列显示)

    nowarp(默认不自动换行)/warp(自动换行)/reverse(反转,在换行时有效)

    简写示例: flex-flow : row warp

warp

nowarp

no-warp

warp

  • justify-content

    flex-start(默认左对齐)/flex-end(右对齐)/center(居中挨着)/space-around(居中分散)/space-between(两端对齐)

space_around

space-around

space_between

space-between

  • align-items align-self(设置自己的位置)

    flex-start(默认左对齐)/flex-end(右对齐)/center(居中)/baseline(内容在统一水平线上)/stretch(拉伸,需要在item不设置高度时有效)

flex-start

flex-start

flex-end

flex-end

flex_baseline

flex-baseline

  • flex-grow 有剩余空间时所占比重,默认0

    flex-shirnk无剩余空间时缩放比重,默认1

    flex-basis指定某一元素的大小

    简写示例: flex : 0 1 150rpx;

  • order 排列顺序使用

  • position

    relative(相对定位)/absolute(绝对定位)

relative

relative

absolute

absolute

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: gooqii 来自: csdn博客

相关阅读