美文网首页
ReactNative Flex布局

ReactNative Flex布局

作者: DanielXinYi | 来源:发表于2019-06-01 16:58 被阅读0次

Flex 布局
1.flexDirection (主轴方向)
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向。
column :竖直轴
row :水平轴

2.alignItems(主轴的排列方式)
在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end、space-around以及space-between。
flex-start、
center、
flex-end、
space-around
space-between。

  1. justifyContent(次轴的排列方式)
    在组件的style中指定alignItems可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end以及stretch。
    flex-start、
    center、
    flex-end
    stretch 注意:要使stretch选项生效的话,子元素在次轴方向上不能有固定的尺寸

相关文章

  • ReactNative UI布局之flex

    ReactNative UI布局之flex flexDirection:决定flex的布局方向 justifyCo...

  • ReactNative之Flex布局

    一般使用ReactNative开发App,一般都采用Flex布局,使用这套布局就非常快。Flex简介Flex又叫弹...

  • ReactNative Flex 布局

    起源 2009年,W3C 提出了一种新的方案----Flex 布局,Flex 是 Flexible Box 的缩写...

  • ReactNative flex 布局

    react-native 就下面四种 flex 属性控制布局 GitHub: https://github.com...

  • ReactNative Flex布局

    Flex 布局1.flexDirection (主轴方向)在组件的style中指定flexDirection可以决...

  • ReactNative笔记-flexbox和position

    ReactNative笔记-flexbox和position 在rn中布局基本上全部是使用的flex,所以flex...

  • ReactNative之Flex布局

    一:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,...

  • ReactNative之Flex布局(三)

    前言 眼看很多公司都开始尝试使用ReactNative,达到跨平台开发,最近也写了很多文章,希望让更多想了解的同学...

  • flex布局

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

  • 初见FLEX

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

网友评论

      本文标题:ReactNative Flex布局

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