Flex弹性布局

说起布局,我脑子里一下就想到了DIV+CSS布局,毕竟曾经被那么多写着DIV+CSS网页开发的书籍洗过脑,然后到现在还不怎么会用这种大众的布局方式。当然了,其实页面还有其它的一些布局方式,比如表格布局,框架布局这样已经逐渐被淘汰的布局方式,也有今天的主角–一颗冉冉上升的新星,弹性盒子布局。

Flex是Flexible Box的简称,我们这里把其翻译为弹性布局,至于为什么不叫“灵活的盒子布局”。额,这个问题也许会在读完本篇文章找到答案。好吧,正式开始。

容器

flex是display的一个属性,当然对于行内元素还有一个叫做flex-inline的属性,这里我们不多说,但是要注意的是,一旦对一个元素的display属性设为flex,那么它的子元素就不能使用“浮动(float)”这个神奇的属性,而这个元素将会一跃成为容器(container),而其的子元素将会成为项目。好吧,先从容器说起。

一旦把一个元素的display属性设置成为’flex’,这个元素就成为一个容器容器有几个比较重要的属性,学习和掌握这几个属性是学习弹性布局的关键。它们分别是:

  1. flex-direction: 决定子元素(项目)的排列方向。
  2. justify-content: 指定子元素在主轴上的对齐方式。
  3. flex-wrap: 指定多行显示以及显示形式。
  4. align-items: 决定项目在交叉轴上的对齐方式。
  5. align-content: 定义项目在多轴线上的对齐方式。

好吧,大概就是这几个了,我们注意到在上面解释的时候提到了主轴交叉轴,这里我先简单解释一下:对于这个概念,我们可以很简单的在一个容器上画一个十字坐标轴,如果我们设置flex-direction为row(行),那么横坐标就为主轴,纵坐标就是交叉轴,这里要注意坐标轴的指向,因为同样有一个属性为row-reverse,此时主轴的方向指向和设置为row的相反方向。

项目

作为容器的子元素,项目同样有几个重要的属性:

  1. order: 控制项目的排列,默认为0,值越小则越靠前。
  2. flex-grow: 用于定义Flex项目的放大比例,默认为0,即使存在剩余空间,也不放大。
  3. flex-shrink: 用于定义Flex项目的缩小比例,默认为1,即空间不足,Flex项目将等比缩小。
  4. align-self: 允许单个Flex项目有不同于其他Flex项目的对齐方式。

然后

我并不会把每一个属性具体来讲,因为这样的文章在网络上的确太多了。我正在学习RN,所以在这里就写一个界面,其中的布局将会采用弹性布局,中途我会对布局进行简单的分析,以加深理解。
当写到这里的时候我就开始布局这个简单的页面,然后到现在才布局好,时间用了那么长,感觉像是过了一年…好了,不多说了,最终的界面如下图所示。

其实我也不知道自己写了啥,还是勉为其难的就叫其“登录页面”吧,现在我来分析一下这个页面哪些元素是容器和项目(当然都是项目啦),又在什么地方使用了什么属性。

页面整体采用了弹性布局,所以从整体来看我们一定使用了flex-direction属性,并且其值是column,所以这里的主轴一定是Y轴并且是方向向上。并且我们能够观察到,页面上所有的元素都是居中的,我们于是想到了在交叉轴上的对齐方式是: align-items: ‘center’,而其主轴上的对齐方式则是默认的justify-content: ‘flex-start’。

接下来来看两个不明显的,页面上有两个输入框,每个输入框其实都是一个View组件包裹,那么在这个组件内部,我们仍然使用了弹性布局(竖轴为主轴),为了让输入框上下居中,这里必须让justify-content: ‘center’;紧接着最后一行有两个按钮,这两个按钮同样在一个View组件中,并且这个View也是弹性布局,并且一定要设置flex-direction: ‘row’才能让这两个按钮排列在一行。我们同样可以给每个按钮赋予不同的order值,让其进行排序。

总结一下:
我们是用弹性布局完成了一个基本页面的布局(虽然这真的很丑陋),在这个简单的布局中我们使用到的属性并不多,但是的确比使用css+div布局来得更快,尤其是垂直上的居中,css是比较难以实现的。这里我们一共有四个容器,分别是最外层容器,每一个输入框外层容器,按钮组外层容器,当然,这里面所有的元素都能称为项目,这里就不在多说。

尾巴

说了这么多,那么我对flex布局的态度到底是什么?一句话总结,学习它,了解它,使用它。弹性布局我在刚开始学习React的时候就有了解过,过了也快半年了吧,当时看着阮一峰老师的文章,感觉怎么都不明白,然后渐渐抛之脑后。直到学期开始,我开始学习RN,再一次接触到Flex布局,才想起来画一些时间去了解,然后试着使用,最后再让自己记忆下来。相比第一次我接触Flex布局,我做出了改变,而这种改变是在时间并不充裕的情况下,弥足珍贵的。希望自己能够加油,也希望和我有同样压力的同学加油!

分享到 评论