Flex布局背后的主要思想是允许容器更改项目的宽度/高度（和顺序）以填充可用空间（主要是适应各种显示器和屏幕尺寸）。弹性容器扩展项目已填充可用空间或减少它们以防止溢出。
最重要的是，弹性盒布局与常规布局无关（基于垂直块和基于水平的内部工会）。尽管它们适合页面，但它们缺乏支持大型或复杂应用的灵活性（尤其是当它们涉及方向变化，调整大小，伸展，收缩等）。
注意：布局最适合该应用程序的组件和小规模布局，并且布局适用于较大的尺度布局。
Web布局的关键应用程序。布局的传统解决方案基于框形模型，取决于显示属性 +位置属性 +float属性。对于这些特殊布局（例如垂直性），它非常不便，它是不容易实现。
flex布局（Flex是灵活框的缩写），也称为弹性框型号。编写属性和属性值（显示：flex;），其中标签样式，谁是容器；其所有子元素都会自动成为容器的成员，称为项目。
当元素的显示值是flex时，所有项目（子元素）将以一行显示；如果所有项目大小的总和大于容器，则不会超过父元素的宽度和高度。它不会更改（每个项目都会自动减少相应的比例）。
作为可以替代浮动的新布局，Flex布局更为先进，更简单，并且越来越流行。
1.屈曲方向
弹性方向属性确定主轴的方向（即项目排列的方向）。
2.弹性包装
弹性包装，Flex布局中的项目将尝试以一行显示
3.弹性流
Flex-Flow属性是flex方向属性和Flex包装属性的简短形式。默认值是row nowrap。
4.合理性
正当属性属性定义了主轴上项目对齐的方法。
5.对准项目
对齐项目如何归因于跨轴上的定义项目。
对准项目属性通常用于设置垂直中心
6.对齐
对齐符号属性定义了多轴的对齐方法。如果项目只有一个轴，则该属性不起作用。
在项目上设置了以下6个属性。
Flex Grow属性定义项目的缩放比率，默认值为0，也就是说，如果有剩余空间，它将不会被放大。
注意：如果所有项目的挠性增长属性为1，它们将划分剩余的空间（如果是）。比其他项目两倍。
注意：如果所有项目的flex-shrink属性均为1，那么当空间不足时，将减少比例。前者不会减少。
负值对于此属性无效。
挠性属性是柔性生长，屈曲障碍和挠性基础。默认值为0 1自动。后两个属性是可选的。
作者：胜利123
日期：5.4
参考：http：//www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://css-tricks.com/snippets/css/a-nide--flexbox/＃aa-rder
原始：https：//juejin.cn/post/709745471563401886