1、弹性盒子模型

弹性盒子模型(flex box)是CSS3中的一种新的布局模式，是一种当我们的html页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
是通过设置display属性的值为flex定义为弹性容器的。
上一章所说的盒子模型是定义某个元素要如何显示的，与盒子模型不一样的是，弹性盒子模型主要是定义弹性盒子里的弹性子元素要如何布局的。

2、弹性盒子模型内容组成

由弹性容器(Flex container)、一个或者多个弹性子元素(Flex item)组成。
默认情况下子元素是横向摆放的。

3、父元素上的属性

flex-direction属性，指定了弹性子元素在父容器中的排列方式

  1. flex-direction: row;            横向从左到右排列(左对齐)，默认的排列方式
  2. flex-direction: row-reverse;    反转横向排列(右对齐)，从后往前排，最后一项排在最前面
  3. flex-direction: column;         纵向排列
  4. flex-direction: column-reverse; 反转纵向排列，从后往前排，最后一项排在最上面

align-items属性，指定了弹性项在容器里水平方向的对齐方式

  1. align-items: flex-start;   弹性项目向行头紧挨着填充(居左摆放)，这个是默认值。
  2. align-items: flex-end;     弹性项目向行尾紧挨着填充(居右摆放)
  3. align-items: center;       弹性项目居中紧挨着填充(居中摆放)

justify-content属性，指定了弹性项在容器里垂直方向的对齐方式

  1. justify-content: flex-start;   弹性项目向行头紧挨着填充(居上摆放)，这个是默认值。
  2. justify-content: flex-end;     弹性项目向行尾紧挨着填充(居下摆放)
  3. justify-content: center;       弹性项目居中紧挨着填充(居中摆放)

flex-grow属性，指定了弹性子元素在父容器中所占有的比份，如下，盒子1占总宽度的1份，2占3份，3占1份

  1.         .contianer{
  2.             display: flex;
  3.         }
  4.         .one{
  5.             flex-grow: 1;
  6.             background-color: antiquewhite;
  7.         }
  8.         .two{
  9.             flex-grow: 3;
  10.             background-color: yellow;
  11.         }
  12.         .three{
  13.             flex-grow: 1;
  14.             background-color: antiquewhite;
  15.         }

flex-wrap属性，指定必要时是否拆行

值 描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

flex-shrink 属性，指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

值 描述
number 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

flex-basis 属性用于设置或检索弹性盒伸缩基准值。

值 描述
number 一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

4、子元素上的属性

flex属性，根据弹性盒子子元素所设置的扩展因子作为比率(权重)来分配容器剩余空间。
如果父级容器宽高为600px;我想box1占3份、box2占2份、box3占1份，可以按如下进行设置：

  1. .box1{
  2.   /* 占比权重，设置了flex后，box的宽度将不再生效 */
  3.   flex: 3;
  4.   width: 100px;
  5.   height: 100px;
  6.   background-color: red;
  7. }
  9. .box2{
  10.   /* 占比权重，设置了flex后，box的宽度将不再生效 */
  11.   flex: 2;
  12.   width: 100px;
  13.   height: 100px;
  14.   background-color: wheat;
  15. }
  17. .box3{
  18.   /* 占比权重，设置了flex后，box的宽度将不再生效 */
  19.   flex: 1;
  20.   width: 100px;
  21.   height: 100px;
  22.   background-color: yellow;
  23. }

5、示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性盒子模型</title>
  6.     <style>
  7.         .flex-container{
  8.             display: flex;
  9.             width: 600px;
  10.             height: 600px;
  11.             background-color: lightgray;
  12.             flex-direction: row;
  13.             /* 水平居中 */
  14.             align-items: center;
  15.             /* 垂直居中 */
  16.             justify-content: center;
  17.             /* 文字水平居中 */
  18.             text-align: center;
  19.         }
  21.         .box1{
  22.             /* 占比权重，设置了flex后，box的宽度将不再生效 */
  23.             flex: 3;
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: red;
  27.         }
  29.         .box2{
  30.             /* 占比权重，设置了flex后，box的宽度将不再生效 */
  31.             flex: 2;
  32.             width: 100px;
  33.             height: 100px;
  34.             background-color: wheat;
  35.         }
  37.         .box3{
  38.            /* 占比权重，设置了flex后，box的宽度将不再生效 */
  39.             flex: 1;
  40.             width: 100px;
  41.             height: 100px;
  42.             background-color: yellow;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  48.     <div class="flex-container">
  49.         <div class="box1">1</div>
  50.         <div class="box2">2</div>
  51.         <div class="box3">3</div>
  52.     </div>
  54. </body>
  55. </html>