博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

微信小程序-布局

Posted on 2021-04-12 19:42  孤峰皓月  阅读(80)  评论(0编辑  收藏  举报

1.容器的属性:

flex-direction 布局的方式是行还是列
                     row
                     row-reverse
                     column
                     column-reverse


flex-wrap 是否换行
    nowrap:不换行
    wrap:换行,第一行在上方
    warp-reverse:第一行在下方


justify-content 主轴对齐方式
    space-between:两端对齐,项目之间的间隔都相等
    flex-start:左对齐(默认)
    flex-end:右对齐
    space-around:每个项目两侧的间隔都相等

order 排序

flex 空间占比

align-self 允许单个项目有自己的对齐方式(与众不同) 
    可覆盖align-items属性
    默认为auto,表示继承父元素的align-items属性


align-items 交叉轴对齐方式