React Native的FlexBox布局指南

2016-02-16 23:47小小哆iOSDev,React Native相关评论(0)

React Native的FlexBox布局指南

一、FlexBox布局

1.1 什么是FlexBox布局?

  • Flexbox是css3中引入的布局-弹性盒子模型,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕的宽度;
  • Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间;
  • React native中的FlexBox是这个规范的一个子集

1.2 就是处理图中FlexItem在FlexContainer中的位置和尺寸关系

1.png

二、Flexbox的应用场景

2.1 Flexbox在布局中能够解决什么问题?

  • 浮动布局
  • 各种机型屏幕的适配
  • 水平和垂直居中
  • 自动分配宽度

2.2 在CSS中,常规的布局是基于块和内联流方向,而Flex布局是基于flex-flow流,下图很好解释了Flex布局的思想:

2.jpg

2.3 根据伸缩项目排列方式的不同,主轴和侧轴方向也有所变化:

3.jpg

三、Flexbox的常用属性

3.1 容器属性

  • flexDirection: row | row-reverse | column | column-reverse

    • 适用于伸缩容器,也就是伸缩项目的父元素
    • 主要用来创建主轴,从而定义了伸缩项目放置在伸缩容器的方向
    • row(默认值):在“ltr”排版方式下从左向右排列;在“rtl”排版方式下从右向左排列。
    • row-reverse:与row排列方向相反,在“ltr”排版方式下从右向左排列;在“rtl”排版方式下从左向右排列。
    • column:类似 于row,不过是从上到下排列
    • column-reverse:类似于row-reverse,不过是从下到上排列。
      4.png
  • flexWrap: nowrap | wrap | wrap-reverse

    • 适用于伸缩容器,也就是伸缩项目的父元素
    • 主要用来定义伸缩容器里是单行还是多行显示,侧轴方向决定了新行堆放的方向。
    • nowrap(默认值):伸缩容器单行显示,“ltr”排版下,伸缩项目从左到右排列;“rtl”排版上伸缩项目从右向左排列。
    • wrap:伸缩容器多行显示,“ltr”排版下,伸缩项目从左到右排列;“rtl”排版上伸缩项目从右向左排列。
    • wrap-reverse:伸缩容器多行显示,“ltr”排版下,伸缩项目从右向左排列;“rtl”排版下,伸缩项目从左到右排列。(和wrap相反)
      5.png
  • alignItems: flex-start | flex-end | center | baseline | stretch

    • 主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。
    • 可以把其想像成侧轴(垂直于主轴)的“justify-content”。
    • flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
    • flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
    • center:伸缩项目的外边距盒在该行的侧轴上居中放置。
    • baseline:伸缩项目根据他们的基线对齐。
    • stretch(默认值):伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
      6.jpg
  • justifyContent:flex-start | flex-end | center | space-between | space-around

    • 定义伸缩项目沿着主轴线的对齐方式
    • flex-start(默认值):伸缩项目向一行的起始位置靠齐。
    • flex-end:伸缩项目向一行的结束位置靠齐。
    • center:伸缩项目向一行的中间位置靠齐。
    • space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置。
    • space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。
      7.jpg

3.2 元素属性

  • flex

    • “flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。
    • 其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。
    • 默认值为“0 1 auto”。
    • 宽度 = 弹性宽度 * (flex-grow/sum(flex-gorw))
      8.png
  • alignSelf: auto | flex-start | flex-end | center | baseline | stretch

    • 用来在单独的伸缩项目上覆写默认的对齐方式。
      9.png
上一篇 管理React Native库的版本React Native常用组件之Text 下一篇
评论 0
由于之前使用多说插件出现问题,导致以前的评论丢失,在此深表歉意!

站点统计

  • 建站日期:2014-12-06
  • 最后更新:2016-05-19
  • 运行时间:2001 天
  • 文章数量:44 篇