- 注意：设为 Flex 布局以后，css的columns在伸缩容器上将失效；子元素的float、clear和vertical-align属性将失效。
一：基本弹性盒模型演示！
div{
display:flex;
width:600px;
border:1px solid red;
}
p{
height:200px;
border:1px solid blue;
}
任何元素都可以设置display:flex;因为所有元素意义上都是盒子
display:inline-flex
和flex的区别 是flex占据一行，inlineflex占据自己应该占据的位置！有点像inlineblock 不支持margin auto,支持text-align
给伸缩容器的属性！
弹性盒模型主要就分为 “伸缩容器”和“伸缩项目” 伸缩容器我们可以简单的理解为弹性盒模型父元素！反之伸缩项目就是弹性盒模型的子元素！
1. 主轴方向（伸缩流方向） fiex-direction
div{
flex-direction:row; /*默认*/
flex-direction:row-reverse; /*水平反向*/
flex-direction:column; /*竖直*/
flex-direction:column-reverse; /*垂直反向*/
}
2. 交叉轴的方向 flex-wrap 规定伸缩项目是否（子元素）换行！
div{
flex-wrap:nowrap; /* 默认 不换行*/
flex-wrap:wrap; /*换行*/
flex-wrap:wrap-reverse; /*反向换行*/
flex-flow
fiex-direction 和 flex-wrap 组成一个复合属性
div{
flex-flow:row-reverse wrap; /*反向水平 换行*/
}
3. 伸缩项目在主轴对齐方式 justify-content
div{
justify-content:flex-start; /*默认 主轴的起点*/
justify-content:flex-end; /*主轴的终点*/
justify-content:center; /*在主轴的中部对齐！整体居中*/
justify-content:space-between; /*两端对齐，轴线之间的间隔平均分布*/
justify-content:space-around; /*每个项目两侧的间隔都相等*/
}
4. 伸缩项目在伸缩容器的单行交叉轴的对齐方式 align-items :单行时候设置
div{
align-items:stretch; /*默认 不设置项目高度的时候占满整个容器的高度*/
align-items:flex-start; /*侧轴的起点对齐*/
align-items:flex-end; /*侧轴的终点对齐*/
align-items:center; /*中间对齐*/
align-items:baseline; /*项目的第一行文字的基线对齐。*/
}
5. 多行伸缩项目 对交叉轴的对齐方式。如果项目只有一根轴线，该属性不起作用align-content
注意：多行当使用aligncontent 不要和alignitems共存
div{
align-content：stretch; /*默认值 不设置高度的时候轴线占满整个交叉
轴。*/
align-content：flex-start; /*与交叉轴的起点对齐。*/
align-content：flex-end; /*与交叉轴的终点对齐。*/
align-content：center; /*与交叉轴的中点对齐。*/
align-content：space-between; /*与交叉轴两端对齐，轴线之间的间隔平均分布。
*/
align-content：space-around; /*每根轴线两侧的间隔都相等。*/
}
给伸缩项目（子级）的属性！
1 order:1; 伸缩项目的排列顺序。
order:1;/*默认为0 整数 可以为负值 数值越小，排列越靠 前*/
2 flex-grow: 指定了该项目应该占用的伸缩容器内的多少空间。
flexgrow:1;默认是0 单位是数字 没有单位 不支持负值
值为1的时候 占 一份
其中有一个值为2的时候 大小将是1的两倍
3 flex-shrink 当Flex项目的总大小大于Flex容器时，Flex项目将缩小以根据编号填充容器。
flexshrink默认属性为1，当空间不足时，都将等比例缩小。 不支持负值
如果一个项目的flexshrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
如果所有项目的flexshrink属性都为1，其中一个项目的flexshrink属性为3，当空间不足时，为3的这个项目会缩小的更多，缩小的部分会平分给等于1的盒子
总结：值越小缩小的越少，越大缩小的越多
4 flex-basis 设置项目的初始长度
给flexbasis只是初始值，以后会随着内容的变化吧盒子撑大
可以理解为盒子的宽度，当我们他的值是auto时，盒子的宽度取决于width
flex-basis:100px; /*默认值为auto：自适应内容撑开*/
5 flex简写属性
flex属性是flexgrow, flexshrink 和 flexbasis的简写，默认值initial可以表示为0 1 auto
flex: auto它代表 1 1 auto. auto 是有内容的撑开之后，剩下的空间几个盒子平分！
flex:none 0 0 auto是内容的宽度！ 不放大 不缩小 自动
flex:1是平分盒子，每个盒子占多少分之一 代表 1 1 0 放大 缩小 自动
.
如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 flex: none，none 将会被解释为 0 0 auto.
如果想要一个固定大小的元素，则设置 flex: 0 0 size。如：flex 0 0 60px。
如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置flex: auto
6 align-self 属性允许单个项目与其他项目不一样的对齐方式
可覆盖alignitems属性。默认值为auto，表示继承父元素的alignitems属性，如果没有父元素，则等同于stretch。
flex-start; /*交叉轴的起点对齐。*/
flex-end; /*交叉轴的终点对齐。*/
center; /*交叉轴的中点对齐。*/
baseline; /*项目的第一行文字的基线对齐。*/
stretch; /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
