弹性盒公式超详细

弹性盒：可以对一个容器中的子元素进行排列、对其、分配空白区间。

display:flex;{将元素作为弹性伸缩盒显示}

display：inline-flex；{将元素作为内联块级弹性伸缩盒显示}

{将容器设置为弹性盒之后，子元素中的float、clear、vercital-align的属性都会失效}

{弹性子元素--类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高。}

弹性盒：

有两条轴，，默认的主轴方向---x轴的方向、水平向右（左侧为主轴的起始点、右侧为主轴的终点）

默认的交叉轴（侧轴）方向---y轴的方向，水平向下（上方为侧轴的起始点、下方为侧轴的终点）

主轴的方向--子元素的排列方向

flex-direction：row；（默认值，水平向右，起点在左端）

flex-direction：row-reverse；（水平向左，起点在右端）

flex-direction：column（垂直方向--从上往下，起点在上方）

flex-direction：colunm-reverse；（垂直方向--从下往上。起点在下方）

设置主轴的对齐方式，弹性子元素在主轴方向的对齐方式

justify-content：flex-start（默认值，主轴在顶端对齐）

justify-content：flex-end（主轴在末端对齐）

justify-content：center（居中对齐，子元素位于弹性容器的中心）

justify-content：space-between（两端对齐，子元素和元素之间有空白，项目之间的间距）

justify-content：space-around（四周对齐，子元素之前，之间，之后都有空白，并且空白自行分配，项目和项目之间的间隔要比项目的边框之间的间距大一倍）

justify-content：space-evenly（平均分配，项目与项目之间，项目与边框之间，边框都相等）

弹性子元素在侧轴上的对齐方式：

align-items：flex-start;（默认值，子元素在侧轴的顶端对齐）

align-items：flex-end;（子元素在侧轴的末端对齐）

align-items：center;（子元素在侧轴的中间对齐）

align-items：baseline;（子元素在第一行文字的基线对齐）

align-items：stretch;（【没高度的时候，默认值】如果弹性子元素没有高度或者高度为auto，将占满整个容器的高度）

弹性盒子的子元素的换行属性：

flex-warp：nowarp;（默认值 不换行）

flex-warp：warp;（换行显示，第一行在上方显示）

flex-warp：warp-reverse;（换行 第一行在下方显示）

折行、控制行于行之间的距离

align-content：flex-start;( 默认值 顶端没有间距)

align-content：flex-end;（末端对齐 没有间距）

align-content：center;（居中对齐 没有行间距）

align-content：space-between;（两端对齐 ）

align-content：space-around;（四周对齐）

align-content：space-evenly;（平均分配）

注意：弹性盒项目为多行是有效。

弹性子元素自身在侧轴的对齐方式：

align-self：start；在侧轴的起点对齐

align-self：flex-end；在侧轴的终点对齐

align-self：center；在侧轴的中间对齐

align-self：strecth；如果弹性子元素没有高度或者高度为auto，将会占满整个容器。