flex布局理解

前言：使用flex布局，需先了解两个概念。

flex容器：任何元素都可以被设置为flex容器，display:flex;

flex子项：flex容器里面的元素就是flex子项

说明：
a) 给元素设置了display:flex;后，就成为了弹性盒或者弹性布局
b) 当父元素设置了flex后，子元素的float，clear和vertical-align将会失效
c) 我们把设置display:flex;属性的元素称之为Flex容器，把里面的子元素称之为Flex项目
d) 当给元素设置了display:flex;后，会产生两根轴线：主轴和交叉轴

flex为复合属性：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

flex-grow：扩展比例，剩余空间为正值时，「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。

flex-shrink ：扩展比例，剩余空间为负值时，「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。

flex-basis：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。

剩余空间 指 容器的宽度与所有子项宽度之和的差值，为正值时扩展（使用flex-grow属性），为负值时收缩（使用flex-shrink属性）。

 

flex-flow为复合属性：复合属性。设置或检索弹性盒模型对象的子元素排列方式。

flex-flow：<' flex-direction '> || <' flex-wrap '>

flex-direction：定义弹性盒子元素的排列方向。

flex-wrap：定义flex容器时单行还是多行。

 

align-content：当伸缩容器的测轴还有多余空间时，本属性可以用来调准 【伸缩行】在容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的‘<justify-content>’属性类似。但此属性在只有一行的伸缩容器上没有效果。

justify-content：当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

 

align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。注意是当前行

align-self：定义flex子项单独在侧轴（纵轴）方向上的对齐方式。注意是当前容器

 

order：设置或检索弹性盒模型对象的子元素出現的順序。