认识Flex布局（一）

谁践踏了优雅 2023-06-27 12:38 3阅读 0赞

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

认识Flex布局

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

![format_png][]

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

基本概念

**1.轴**

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

![format_png 1][]

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

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

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

**2.容器**

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

容器和项目属性

**1.容器的属性**

![format_png 2][]

**2.项目的属性**

![format_png 3][]

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

未完

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

![format_png 4][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTR6VElhME9NY1BXelhaZW9aVXp0TnhGdXJZYktUVk9YbTBLMG9LMnF0SWRoU0xVbVlPeE9MVVlJT09YMWJEdmJCNXRoQ1hMbHh6US8w?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJodktxTUZjNEZUVGhrcWVaTXhlU2x3WUxBZ2ljeXlyR2dmSmliVmljNWFiSFM2d3NNa2ZKYkJQWjNEZkNJMWdUYnRHV29XU1dlTVluVXJ3LzA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJodktxTUZjNEZUVGhrcWVaTXhlU2x3S0JhZ3lwbW1Hdm1uYXlrMmVQNkZDakx2dFdtTzZ6UUJ3RDQ0a2liQjJkR3o1WUZOUHRWT3U0Zy8w?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJodktxTUZjNEZUVGhrcWVaTXhlU2x3OE9qS0d6cmliWTlkTUNDUGlhV0V1SFBLQ3pQTXNpY2o4bmVFSzlNeVJOZlYxemIzSGxxVmNlejh3LzA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJqSXZ2dmFwVzVFVm0wWEMzV2xUMXg2UWdQUUJOZXczQndDalh4Qnhya1VEbHBjd09VeFB4eVVUSTZpY1RpYUhzZzVONG81emRUcFRqWVEvMA?x-oss-process=image/format,png