flex将元素放在最后_前端布局——Flex弹性布局

本篇解释了有关flexbox的知识点内容，重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性。

背景

Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置、调整和页面元素在容器中分配空间，即使是未知大小或者动态的，所以称为flex。

flex布局背后的主要思想是让元素在容器内改变宽高和顺序，以更好的填充空间(主要是为了自适应)。flex布局与方向无关，不像常规布局(基于垂直和水平块布局)，缺乏灵活性，无法适应大型项目和复杂的应用程序(特别是改变方向、调整大小、拉伸、缩小等方面)。

• 注意：Flexbox布局最适合组件和小规模的布局，Grid更适合大规模的布局。

知识点

如图，父元素容器，内部包含的是子元素

• display

这里定义了一个flex容器，是否内联取决于给定的值，为所有子元素提供灵活的自适应，css列对flex容器没有影响

• order

默认按顺序排列

• flex-direction