认识Flex布局（一）

        小编目前主要在学习前端框架React和做了微信小程序的DEMO发现，基本上都是在使用Flex布局，而传统的方式（display属性 + position属性 + float属性）存在很多的缺点，布局不是那么方便，因此小编决定在此处来讲解Flex布局，并分篇幅来罗列Flex布局的语法以及实例。

认识Flex布局

        Flex布局，是Flexible Box的缩写，即为弹性布局。先上思维导图，对Flex布局有一个大概的认识。

        导图中主要是罗列了Flex布局的容器和项目的属性，及属性理解，此篇文章，小编暂时不讲解容器和项目的属性，在下面的篇幅中来讲解容器和项目的属性，并对应的附上示例来看效果。Flex布局第一篇主要是先提出几个基本概念，并罗列下容器和项目的属性。

基本概念

1.轴

采用Flex布局的元素，则称之为Flex容器，容器默认有两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

        使用display:flex设置的元素，称为容器，即为图片中的container标示，其中存在两个轴线，即图中的main axis（主轴）和cross axis（交叉轴）。在其中的item，则称为Flex的项目，即在容器中的子元素。

        其中主轴的开始位置为main start，结束位置为main end；

        交叉轴的开始位置为cross start，结束位置为cross end。

2.容器

容器的概念其实在轴的地方已提及，把每一个块（标签）设置为display: flex;则就是一个容器；若出现容器里面在放容器，则里面的容器就称之为项目，如上图中的container为一个容器，item为项目。

容器和项目属性

1.容器的属性

2.项目的属性

此处只罗列容器和项目的属性，后面篇章继续讲解。

                        未完

今天就到这里，下一篇讲解容器的属性