【React Native学习笔记四】flex布局基础

flex布局基础——flexDirection、alignItems、justifyContent

一、flex布局简介

flex是flexible box的简称，即“弹性布局”，比传统的盒状布局更灵活。当一个元素指定为flex布局，其内元素的布局就可以遵循flex布局的规则。

1、块状元素指定为flex布局：display：flex

2、行内元素指定为flex布局：display：inline-flex

3、适配webkit内核浏览器：display：-webkit-flex

接下来介绍其最基本的几个属性。

二、flex-direction属性（方向）

在React Native中，flex-direction默认为column。这跟web（flex-direction默认为row）不一样，因为pc上的网页一般为横向的，而手机一般为纵向的。

1、row：水平方向，从左到右

2、row-reverse：水平方向，从右到左

3、column：垂直方向，从上到下

4、column-reverse：垂直方向，从下到上

三、flex-wrap属性（换行）

1、nowrap：不换行

2、wrap：换行

3、wrap-reverse：换行，但第一行在下方

四、justify-content属性（水平对齐）

1、flex-start：左对齐

2、flex-end：右对齐

3、center：居中

4、space-between：两边分别靠左右两边，中间居中（多列布局中使用到）

五、align-items属性（垂直方向）

1、flex-start

2、flex-end

3、center

4、stretch