06.使用Flexbox布局

1.一般来说,使用flexDirectionalignItems状语从句:  justifyContent三个样式属性就已经能满足大多数布局需求。

06.使用Flexbox布局_第1张图片

1.1Flex方向   

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row方向排列,还是沿着竖直轴(column方向排列呢?默认值是竖直轴(column方向。这句话的意思是父组件flexDirection决定子组件是按照父组件的x轴或者是y轴布局,默认是y轴.如果设置了column,那么子组件就是按照y轴排列,副轴也就变成了x轴.

 // 尝试把`flexDirection`改为`column`看看
            
                
                
                
            

1.2证明内容

在组件的样式指定中justifyContent可以决定其子元素沿着主轴个结果排列方式子元素的英文应该网求靠近主轴的起始端的还是末尾段分布呢亦或应该均匀分布对应的这些柯林斯选项对话有:?? , ,flex-start 以及centerflex-endspace-aroundspace-betweenspace-evenly

1。flex-start

06.使用Flexbox布局_第2张图片

2.center

06.使用Flexbox布局_第3张图片

3。flex-end

06.使用Flexbox布局_第4张图片

4。space-around

06.使用Flexbox布局_第5张图片

5。space-between

06.使用Flexbox布局_第6张图片

 

更详细的讲解在下面的网址:

1.react native中文网

https://reactnative.cn/docs/flexbox/

2.FlexBox布局在RN中的基本用法

https://www.jianshu.com/p/4a61a517c792

3.布局属性:

https://reactnative.cn/docs/0.56/layout-props/

你可能感兴趣的:(06.使用Flexbox布局)