弹性盒模型学习

弹性盒布局

弹性盒布局中有两个相互垂直的坐标轴：一个是主轴,另一个称为交叉轴。主轴并不固定为水平方向的X轴，交叉轴并不固定为垂直方向的y轴。

弹性盒模型，使用display：flex 来声明使用弹性盒模型，css3属性声明“flex-direction”用来确定主轴的方向，“flex-direction”属性可选值及其含义如下

column-reverse 主轴为垂直方向。排列顺序为从下到上

属性值	含义
row（默认值）	主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。
row-reverse	主轴为水平方向。排列顺序是从右到左
column	主轴为垂直方向。排列顺序是从上到下
column-reverse	主轴为垂直方向。排列顺序是从下到上

默认情况下，弹性盒容器的条目会尽量沾满容器在主轴方向上的一行。当容器的主轴尺寸小于所有条目总的主轴尺寸时，会出现条目之间相互重叠或超出容器范围的现象。CSS属性“flex-wrap”用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行动。”flex-wrap” 属性可选值如下

属性值	含义
nowrap	容器中的条目只沾满在主轴方向上的一行，可能出现条目相互重叠或超出容器范围的现象
wrap	当容器中的条目超出容器在主轴方向上的一行时，会把条目排列在下一行。下一行的位置与交叉轴方向一致。
wrap-reverse	与wrap 含义类似，不同的是下一行的位置与交叉轴的方向相反。

例：flex-flow:row wrap;

除了弹性布局中的容器之外容器中的条目也可以通过css属性来改变其布局行为。

默认情况下，容器中条目的顺序取决于他们在html标记代码中的出现顺序。可以通过“order”属性啦改变条目在容器中的出现顺序。对于代码中的html 标记添加css声明，运行之后的效果就是会暗中order 的顺序排

弹性布局的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态调整条目的尺寸。当容器存在空白空间时，条目可以扩展尺寸以占据额外的空白空间；当容器空间不足，条目可以缩小尺寸以防止超出容器范围。

条目尺寸的弹性由3个CSS属性来确定，分别是
flex-basis 、flex-grow 、 flex-shrink

flex-basic 值为auto 实际使用的值是主轴尺寸属性的值即width 或height 属性值。如果主轴尺寸属性值也是auto 则使用的值由条目内容的尺寸来确定

flex-grow 属性的值是一个没有单位的非负数，默认值是1.flex-grow 属性的值分别为1，2,3，那么当容器有空白空间时，这三个条目所获得的额外的空白空间为全部空间的1/6 1/3 1/2

属性值	含义
flex-start	条目集中在该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
flex-end	条目集中在该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余条目按照顺序依次排列。
center	条目集中在该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
space-between	第一个条目与其所在行在主轴起始方向上的边界对齐，最后一个条目与其所在行在主轴结束方向保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
space-around	类似space-between,不同的是第一条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间尺寸的一半。

容器使用“align-items”来设置容器中所有条目在交叉轴上默认的对齐方式。而条目上的”align-self“用来覆盖容器指定的对齐方式。属性”align-items“的可选值和含义如下

属性值	含义
flex-start	条目与其所在行在交叉轴起始方向上的边界保持对齐
flex-end	条目与其所在行在交叉轴结束方向上的边界保持对齐
center	条目的空白边盒子在交叉轴上居中，如果交叉轴尺寸小于条目尺寸，则条目会在两个方向上超出相同大小的空间。
baseline	条目在基线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，他与所在行在交叉轴方向上的边界保持对齐
stretch	如果条目的交叉轴尺寸的计算值是auto ，则其实际使用的值会使得条目在交叉轴方向上尽可能占满。

属性”align-self”的可选值除了表中列出的之外，还可以设置为”auto”。当”align-self”的值为 auto 时，其计算值是父节点的属性”align-items”的值。如果该节点没有父节点，则计算值为”stretch”。

当容器在交叉轴方向上有空白空间时，属性“align-content”用来对齐容器中的行。该属性类似”justify-content”,只不过“justify-content：是在值周方向上对齐行中的条目。
当容器中只有单行时，该属性不起作用。