美文网首页
Flex布局学习

Flex布局学习

作者: 猿小军 | 来源:发表于2018-04-09 22:57 被阅读0次

父视图的四个属性

  • 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

相关文章

  • 2018-07-18

    今天主要学习了flex布局,学习笔记如下: 1.指定flex布局: display:flex(任意容器)...

  • flex布局实现骰子

    学习flex布局后的实例布局--骰子具体实现原理可参考阮一峰的Flex 布局教程:实例篇和博客flex布局实现色子...

  • ReactNative实战

    布局 RN的布局思路其实就是Flex布局,关于Flex布局,如果不熟悉的,可以去学习一下Flex布局 先看一下这个...

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • Flex

    Flex布局 这是国外大神专门讲flex布局讲的超级细,虽然没有看完边玩游戏边学习flex 块级布局侧重垂直方向、...

  • flex布局

    关于flex弹性布局的学习记录与详解 flex弹性布局基础: 给一个容器设置display:flex或者inlin...

  • 【转载】微信小程序flex布局

    在小程序中的布局中,官方推荐使用 flex 布局,下面对 flex 进行进一步的学习Flex布局的特点: 任意方向...

  • css notebook

    使用flex实现页面居中 Flex 布局教程:语法篇 学习CSSflexbox

  • CSS flex布局学习笔记

    CSS flex布局学习笔记 flex简介 flex用于为容器内的子元素设置布局。当一个元素的display属性设...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

网友评论

      本文标题:Flex布局学习

      本文链接:https://www.haomeiwen.com/subject/nqbwhftx.html