弹性盒display：flex！

弹性盒：

可以对一个容器中的子元素进行排列，对齐，分配空白区间。

display:fiex;将元素作为弹性伸缩盒显示

display-inline-flex将元素作为内联块级弹性伸缩盒

将容器设置为弹性盒以后，子元素中的float，clear，vertical-align 属性都会失效

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

有两条轴:

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

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

主轴的方向取决于子元素的排列方向

flex-direction:row 默认值，水平向右，起点在左端

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

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

flex-direction：column-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-wrap: nowrap;/*默认值不换行*/

flex-wrap: wrap;/*换行 第一行在上方显示*

flex-wrap: wrap-reverse;/*换行第一行在下方显示

折行，控制行于行之间的距离：

align-content：flex-start；默认值，顶端没有间距

align-content: flex-end ;/*末端对齐，没有间距*/

align-content: space-between ;/*两端对齐，中间距离自动分配

align-content: space-around ;/*四周对齐

align-content: space-evenly ;/*平均分配*╱

注意:弹性盒项目为多行时才有效，必须要有折行属性

-->

<!-- 调整自身在侧轴的对齐方式*/

align-self:flex-start 在侧轴的起点对齐

align-self: flex-end; /*在侧轴的终点对齐

align-self: center; /* 在侧轴的中间对齐*/

align-self: stretch;/*如果弹性子元素没有高度或者高度为auto，将会占满整个容器*/

-->

<!--

/*改变子元素的排列顺序取值:数值，没有单位，默认数值为0，数值越小，越靠前

可以为负数，必须为整数，不能为小数,

order: -1.2;

-->

<!--

fLex属性:指定弹性子元素如何分别剩余的空白区间

fLex-grow:子元素的放大比例(子元素的宽度之和〈父盒子的宽度)取值:数值，没有单位，默认值日，表示不放大

负值无效

可以为小数

注意:当容器有剩余空间是有效

fLex-shrink属性:子元素的缩小比例（(子元素的宽度之和〉父盒子的宽/

flex-shrink: 1;/*默认值，表示空间不足时，等比例缩小*/

flex-shrink : 0;/*表示空间不足时，不缩小*/

flex-shrink : -2;/*负值对该属性无效*/

flex-shrink : 1.5;表示可以为小数；

实际的宽-

(当前元素的宽*shrink值)/(元素1*元素1的shrink值+元素2*元素2的shrink值...)*溢出的空间宽度

fLex-basis属性:定义弹性盒子元素的基准值(参与计算的最终值---

1、基于它计算了容器的剩余空间)

2、基于它计算增长以后的最终值)

/*复合写法

fLex-fLow: fLex-direction fLex-wrap;*/

caLc)函数

用于动态计算长度值,

支持的运算符+-*/加减乘除

在运算符的前后都需要保留一个空格

letter-spacing文字间隙