弹性盒模型

flexbox 

经过给父级添加display: flex;  使父级变成一个弹性盒模型，以此来影响后代元素(不会影响自身)

设置过弹性盒模型的父级，其子代通常不会超出父元素的内部范围，除非被内容撑开子元素的宽高，致使没法改变子元素的大小时会超出，（注意：一串数字或一串字母写在一块儿会被浏览器默认为一个字符，不会默认换行）

默认子元素同排显示（按主轴方向排布），当父级宽度有剩余时，子代正常显示，当子代宽度超过父级时，等宽度比去分配子代宽度

默认子代高度100%宽度为零，与倒置的标准文档流极度类似，相似宽高对调

1、由于子元素时按照主轴方向排列的，因此咱们须要改变主轴方向来改变排列方式

flex-direction(主轴方向):

1. row(默认值)：主轴横向，从左向右

2. row-reverse：主轴横向，从右向左

3. column：主轴纵向，自上向下（变的和标准文档流同样默认width:100%）

4. column-reverse：主轴纵向，自下向上（变的和标准文档流同样默认width:100%）

2、由于子元素在弹性盒模型里默认不换行，须要设置 flex-wrap 来使它换行

flex-wrap：

1.wrap：换行，虽然换行可是会在评分父级高度处换行（flexbox中到处可见均分），且若是子元素的总宽度大于父元素，超出的子元素将到下一行显示，子元素宽度不会重置，若是子元素的总高度大于父元素，则元素会超出父元素边界

3、在主轴的排列方向 justify-content 主轴起点为mian start，终点为mian end

在不动主轴的状况下justify-content：

1. flex-end：右对齐

2. flex-start（默认值）：左对齐

3. center：居中

4. space-between：两端对齐，子元素之间间隔相等 元素之间的间距=(父元素的宽度-子元素宽度之和)/(子元素个数-1)

5. space-around：子元素的margin-left与margin-right均分空余区

4、交叉轴的排列方向 align-items

align-items：除1外其余的都会破坏默认高度100%

1. stretch(默认值)：若是项目未设置高度或者设成auto，将占满整个容器的高度

2. flex-start：交叉轴的起点对齐

3. flex-end：交叉轴的终点对齐

4. center：交叉轴的终点对齐，即垂直居中

5. baseline：全部子代的第一行文字的基线对齐，知足所有的文字基线准则，注意当子代为空时会被认为和图片同样，底部会照着基线排列进而影响美观

5、交叉轴排列方向2 align-content 能够很好的解决二中的问题

align-content：

1. stretch(默认值)：各行将会伸展以占用剩余的空间。若是剩余的空间是负数，该值等效于'flex-start'。在其它状况下，剩余空间被全部行平分，以扩大它们的高度尺寸。

2. center：元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐

3. flex-start：元素位于容器的开头

4. space-between：各行在弹性盒容器中平均分布(主要表如今宽)，未设置高度的会自动变成该行最高的子代的高度

5. space-around：各行在弹性盒容器中平均分布(主要表如今高)，两端保留子元素与子元素之间间距大小的一半

6. flex-end：元素位于容器的底部

6、弹性增加因子（必须是父级宽度有剩余时才有效，不然无法增加）

flex-grow （弹性增加因子）：number（填数字）；/定义项目的放大比例（默认为0） 即若是存在剩余空间，也不放大/

该CSS属性设置子元素在弹性容器的具备剩余空间是应该如何分配给元素。flex-grow剩余空间是flex容器的大小减去全部lex项目的大小。若是全部兄弟项目具备相同的弹性增加因子，则全部项目将得到相同的剩余空间份额，不然将根据不一样弹性增加因子定义的比率进行分配。

7、弹性缩小因子（解决子元素总宽大于父级时，如何缩小的问题）

flex-shrink （弹性缩放因子） ：number； /定义项目的缩小比例，即若是空间不足，该项目将缩小（默认为1）；/

弹性增加因子:当父级元素的宽大于子元素的宽和时，能够利用弹性增加因子.
（无负值）把父元素剩余的空间合理应用,按弹性增加因子的比例给子元素加宽
弹性缩小因子:当父级元素的宽小于子元素的宽和时，能够利用弹性缩小因子.
（无负值）把子元素溢出的空间合理应用，按弹性缩小因子的比例给子元素减宽

8、flex属性（复合写法）

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto。后两个属性可选

flex: flex-grow  flex-shrink flex-basis（初始宽度）;

1. auto 计算值为 1 1 auto

2. initial: 计算值为 0 1 auto

3. none：计算值为 0 0 auto

4. inherit：从父元素继承

建议优先使用这个属性，而不是单独写三个分离的属性，由于浏览器会推算相关值，方便不用计算

9、order属性：整数值；

属性定义子元素的排列顺序，数值越小越靠前。默认为0，可负数