zoukankan      html  css  js  c++  java
  • 微信小程序view元素Flex布局

    对于网页布局,推荐 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以参考完全教材,我推荐一个阮老师的,下面是链接

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    对于 Flex 有几个属性,然后对常见的属性展开说明即可,怎么使用就完了。
    对于这个布局的多动手,实在是一个非常不错的方法。

    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

    • 先声明这个是什么布局, 直接在对于的父view里面用, 下面的代码
    display: flex;
    
    • 对于第一个flex-direction,父view里面的元素排列方式,就是flex布局(这里注意是里面的view才生效,如果作用范围不是这个,那就没有效果了),其值有三个,第一个是默认。其他看单词意思就知道了。依次是 横向,横向从右往左、垂直、垂直从下到上
    row | row-reverse | column | column-reverse;
    
    • flex-wrap 这个意思,对于元素太多,而且指定每个view的宽度,view 宽度大于最大宽度是否换行,依次的意思不换号、换行、换行且颠倒
    nowrap | wrap | wrap-reverse
    
    • justify-content这个是对其方式,依次是左对齐、右对齐、居中、两端对齐,项目之间的间隔都相等、每个项目两侧的间隔相等
    justify-content: flex-start | flex-end | center | space-between | space-around;
    
    • align-items属性定义项目在交叉轴上如何对齐。

    这个我还没有用过,不过看介绍蛮花哨的。nice~

    
    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    

    其他的参数对于小项目来说,用的较少,说了也不一定记得住,如果有用到的话,在实战种用起来。这个才是记得最牢固的!

  • 相关阅读:
    mysql六:数据备份、pymysql模块
    mysql三:表操作
    mysql四:数据操作
    剑指offer-数组
    剑指offer-回溯
    中缀表达式到后缀表达式的转换
    大数取余算法的证明及实现
    Windows下匿名管道进程通信
    Windows下使用命令行界面调用VS2015编译器编译C++程序方法
    6 个技巧,提升 C++11 的 vector 性能
  • 原文地址:https://www.cnblogs.com/ievjai/p/14382680.html
Copyright © 2011-2022 走看看