Flex布局学习

父视图的四个属性

  • flexDirection 布局方向
    1. column（默认）从左到右
    2. row 从上到下
    3. column-reverse 从右到左
    4. row-reverse 从下到上
  • flexWrap
    1. nowrap (默认）超过屏幕不换行
    2. wrap 超过屏幕换行
  • justifyContent 决定视图x轴位置
    1. flex-start (默认）从左到右
    2. flex-end 从右到左
    3. center 居中
    4. space-between 两端对齐
    5. space- around 平分局中
  • alignItems 决定视图y轴位置
    1. flex-start （默认）从上到下
    2. flex-end 从下到上
    3. strength 拉伸
    4. center 局中

子视图的两个属性

  • autoSelf
    1. auto (默认),使用父视图的alignItems的值，如果没有，默认为strength
    2. 与alignItems取值一样
  • flex，相当于权值
    1. 0（默认）
    2. 其他数字，数字越大，权值越大

其他属性

  • width和heigh
  • 边框border开头
  • 外边居margin开头
  • 内边居padding开头
  • 边缘left等
  • 定位
    1. relative (默认）相当位置
    2. absolute
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • flex布局学习
    flex布局基础知识 main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平，这...
    前端小兵阅读 3,385评论 0赞 1
  • Flex 布局学习
    学习自阮一峰Flex 布局教程 注意 设为 Flex 布局以后，子元素的float、clear和vertical-...
    ChrysAwesome阅读 1,878评论 0赞 0
  • Flex布局学习
    传统的网页布局中，我们经常使用display:block+margin+padding+float+positio...
    plainnany阅读 3,604评论 0赞 1
  • flex布局学习
    flex是flexible的缩写，意思为弹性布局 flex布局出现，vertical-align,float,cl...
    Lemon不怕酸啊阅读 1,930评论 0赞 0
  • flex布局学习笔记
    polyfill 兼容某些浏览器的保险写法 容器的属性 1.flex-direction2.flex-wrap3....
    Point_halo阅读 3,663评论 0赞 0