码迷,mamicode.com
首页 > 其他好文 > 详细

flexbox布局

时间:2016-09-03 00:59:06      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

flexbox布局(RN基础)

flexbox是Flexible Box的缩写, 弹性盒子布局 主流的浏览器都支持
flexbox布局是伸缩容器(container)伸缩项目 (item)组成
Flexbox布局的主体思想是元素可以改变大小以适应可用空间, 当可用空间变大, Flex元素将伸展大小以填充可用空间, 当Flex元素超出可用空间时将自动缩小。 总之, Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩
按照伸缩流的方向布局
伸缩容器有主轴交叉轴组成! 主轴既可以是水平轴, 也可以是垂直轴
flexbox目 前还处于草稿状态, 所有在使用flexbox布局的时候, 需要加上各个浏览器的私有前缀, 即-webkit -moz -ms -o等

伸缩容器的属性

  • 1 .display(指定元素是否为伸缩容器)
    display:flex | inline-flex
    块级伸缩容器 行内级伸缩容器
  • 2.flex-direction
    指定主轴的方向 flex-direction:row(默认值)(从左到右) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上)
  • 3.flex-wrap
    伸缩容器在主轴线方向空间不足的情况下, 是否换行以及该如何换行
    flex-wrap:nowrap(默认值)(不换行) | wrap(换行 从上到下) | wrap-reverse(换行 从下到上)
  • 4.flex-flow
    是flex-direction和flex-wrap的缩写版本, 它同时定义了伸缩容器的主轴和侧轴 , 其默认值为 row和nowrap
  • 5.justify-content
    用来定义伸缩项目 在主轴线的对齐方式, 语法为: justify-content:flex-start(默认值)(从左开始) | flex-end(从右开始) |center(水平居中) | space-between(水平平均分布) | space-around(水平平均分布,两边留一半)
  • 6.align-items
    用来定义伸缩项目 在交叉轴上的对齐方式, 语法为: align-items:flex-start(默认值)(从上开始) | flex-end(从下开始) |center(垂直居中) | baseline(基准线)(容器下方) | stretch(垂直拉伸)
  • 7.align-content
    用来调整伸缩项目 出现换行后在交叉轴上的对齐方式, 语法为: align-content:flex-start(上面) | flex-end(下面) |center(垂直居中) | space-between(垂直平均分布) | space-around(垂直平均分布,两边留一半) | stretch(默认值)

    flexbox布局(伸缩属性)

    伸缩项目的属性

  • 1 .order
    定义项目 的排列顺序, 数值越小, 排列越靠前, 默认值为0, 语法为: order: 整数值
  • 2.flex-grow
    定义伸缩项目 的放大比例, 默认值为0, 即表示如果存在剩余空间, 也不放大, 语法为: flex-grow: 整
    数值
  • 3.flex-shrink
    定义伸缩项目 的收缩能力, 默认值为1 , 其语法为: flex-shrink:整数值
  • 4.flex-basis
    用来设置伸缩项目 的基准值, 剩余的空间按比率进行伸缩, 其语法为: flex-basis:length | auto, 默认
    值为auto
  • 5.flex
    是flex-grow flex-shrink flex-basis这三个属性的缩写, 其语法为: flex:none | flex-grow flex-shrink flexbasis, 其中第二个和第三个参数为可选参数, 默认值为: 0 1 auto
  • 6.align-self
    用来设置单独的伸缩项目 在交叉轴上的对齐方式, 会覆盖默认的对齐方式, 其语法为: align-self:auto
    | flex-start | flex-end | center | baseline | stretch(伸缩项目 在交叉轴方向占满伸缩容器, 如果交叉轴为
    垂直方向的话, 只有在不设置高度的情况下才能看到效果)
    在React Native中使用 flexbox

    RN目前主要支持flexbox的如下6个属性:

  • 1 .alignItems
    用来定义伸缩项目 在交叉轴上的对齐方式, 语法为: alignItems:flex-start(默认值) | flex-end |
    center | stretch
  • 2.alignSelf
    用来设置单独的伸缩项目 在交叉轴上的对齐方式, 会覆盖默认的对齐方式, 其语法为: alignSelf:auto |
    flex-start | flex-end | center | stretch(伸缩项目 在交叉轴方向占满伸缩容器, 如果交叉轴为垂直方向的
    话, 只有在不设置高度的情况下才能看到效果)
  • 3.flex
    是flex-grow flex-shrink flex-basis这三个属性的缩写, 其语法为: flex:none | flex-grow flex-shrink flexbasis, 其中第二个和第三个参数为可选参数, 默认值为: 0 1 auto
  • 4.flexDirection
    指定主轴的方向 flex-direction:row| row-reverse | column(默认值) | column-reverse
  • 5.flexWrap
  • 6.justifyContent




flexbox布局

标签:

原文地址:http://www.cnblogs.com/wisemen/p/5836022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!