• 注意：设为 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占据一行，inline­flex占据自己应该占据的位置！有点像inline­block 不支持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

注意：多行当使用align­content 不要和align­items共存

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: 指定了该项目应该占用的伸缩容器内的多少空间。

flex­grow:1;默认是0 单位是数字 没有单位 不支持负值
值为1的时候 占 一份
其中有一个值为2的时候 大小将是1的两倍

3 flex-shrink 当Flex项目的总大小大于Flex容器时，Flex项目将缩小以根据编号填充容器。

flex­shrink默认属性为1，当空间不足时，都将等比例缩小。 不支持负值
如果一个项目的flex­shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
如果所有项目的flex­shrink属性都为1，其中一个项目的flex­shrink属性为3，当空间不足时，为3的这个项目会缩小的更多，缩小的部分会平分给等于1的盒子

总结：值越小缩小的越少，越大缩小的越多

4 flex-basis 设置项目的初始长度

给flex­basis只是初始值，以后会随着内容的变化吧盒子撑大
可以理解为盒子的宽度，当我们他的值是auto时，盒子的宽度取决于width

flex-basis:100px; /*默认值为auto：自适应内容撑开*/

5 flex简写属性

flex属性是flex­grow, flex­shrink 和 flex­basis的简写，默认值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 属性允许单个项目与其他项目不一样的对齐方式

可覆盖align­items属性。默认值为auto，表示继承父元素的align­items属性，如果没有父元素，则等同于stretch。

flex-start; /*交叉轴的起点对齐。*/
flex-end; /*交叉轴的终点对齐。*/
center; /*交叉轴的中点对齐。*/
baseline; /*项目的第一行文字的基线对齐。*/
stretch; /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/