Fork me on GitHub

ReactNative基础之flexbox布局

ReactNative基础之FlexBox

什么是Flexbox布局(“弹性布局”)

React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局,但是要比 LinearLayout要强大的多!

flexbox布局的组成

  1. 首先使用Flexbox需要理解两个概念: 主轴(main axis)和侧轴(cross axis)主轴和侧轴是互相垂直的,在react-native中 主轴是垂直方向
  2. flexbox 布局由伸缩容器伸缩项目组成。任何一个元素都可以指定为 flexbox 布局。
  3. 伸缩容器的子元素称为伸缩项目。

伸缩容器的相关属性说明

flexDirection 控制主轴方向

row(水平方向) | column(垂直方向)

1
flexDirection: 'column'  //row | column(react-native默认)



flexDirection_column



flexDirection_row

justifyContent 伸缩项目在伸缩容器的主轴方向对齐方式

flex-start、center、flex-end、space-around、space-between

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

space-around 表示单个元素左右的间距 注意对比space-between

space-between表示两个元素之间的间距 注意对比space-around




justifyContent_flex_center



justifyContent_flex_end



justifyContent_space_between




justifyContent_space-around

alignItems 伸缩项目在伸缩容器的侧轴上的对齐方式

flex-start、center、flex-end、stretch

  • flex-start(默认值):伸缩项目向侧轴的起始位置靠齐。
  • flex-end:伸缩项目向侧轴的结束位置靠齐。
  • center:伸缩项目向侧轴的中间位置靠齐。
  • stretch(默认值):伸缩项目在侧轴方向拉伸填充整个伸缩容器。
    注意:这种情况下项目不能设置高度,否则看不到效果。




alignItems_flex-end



alignItems_stretch

flexWrap 伸缩项目在伸缩容器的主轴上显示不下的对齐方式

nowrap | wrap nowrap 不换行 , wrap换行

flex 伸缩项目的放大比例

默认值是 0,即表示如果存在剩余空间,也不放大。
如果将所有的伸缩项目的 flex 设置为 1,那么每个伸缩项目将设置为一个大小相等的剩余空间。
如果又将其中一个伸缩项目的 flex 设置为 2,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占的剩余空间的两倍。

宽度 = 弹性宽度 * ( flexGrow / sum( flexGorw ) )

alignSelf 设置单独的伸缩项目在侧轴上的对齐方式,会覆盖默认的对齐方式

auto、flex-start、flex-end、center、stretch。

使用场景: 伸缩容器中设置了 alignItems 对齐方式 ,alignSelf设置单个伸缩项目单独的对齐方式




alignSeft_flex-end

参考:

官方: 可以在线编写布局直接看效果,但是需要翻墙

第三方:从零学React Native之flexbox布局

-------------本文结束感谢您的阅读-------------

本文标题:ReactNative基础之flexbox布局

文章作者:zoudong

发布时间:2018年06月07日 - 14:06

最后更新:2019年03月16日 - 17:03

原始链接:http://blog.zoudongq123.cn/2018/06/07/ReactNative基础之FlexBox/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

分享