1. Flexible Box

• FlexibleBox是什么？
• 一种新的排版上下文
• 它可以控制子级盒子的
  • 摆放的流向 ( → ← ↑ ↓ )
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

1.1 display:flex

• display:flex 使元素生成一个块级的 Flex 容器
• display:inline-flex 使元素生成一个行级的 Flex 容器
  • 本身是行级的，但是它会为子元素生成一个flex的排版上下文。

<div class="container">
<div class="a"> A </div>
<div class="b"> B </div>
<div class="c"> C </div>
</div>
<style>
  .container{
    display:flex;
    border: 2px solid red;
  }
  .a, .b, .c {
  text-align:center;
  padding: 1em;
  }
  .a { background: #fcc; }
  .b { background: #cfc; }
  .c { background: #ccf; }
</style>

分析：container有abc三个子元素，container是一个flex容器，abc就得安装flex排版上下文的规则进行摆放。

1.2 元素流向：flex-direction

实际效果\

flex-direction:row 
flex-direction:row-reverse 
flex-direction: column
flex-direction:column-reverse

• 默认流向：row 从左到右
• row-reverse ： 从右到左
• column：从上到下
• column-reverse：从下到上

1.3 flex-wrap

• 当子元素较多时，也可以让它们换行
• 通过flex-wrap属性来控制是否换行
  

flex-direction:row;
flex-wrap:nowrap 
flex-direction:row;
flex-wrap:wrap

• flexwarp默认值是nowrap，不换行
• wrap在一行摆放不下时就会换行

1.4 Flexibility：控制flex容器内元素的宽度

• 不是设置一个width属性那么简单，因为这个布局模型之所以叫flexbox，是因为这些元素是可以设置弹性的。
• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
• flex-grow 有剩余空间时的伸展能力
• flex-shrink 容器空间不足时收缩的能力
• flex-basis 没有伸展或收缩时的基础长度

1.4.1 flexgrow

.a, .b, .c {width:100px }

.a, .b, .c {width: 100px}
.a {flex-grow: 1}

.a, .b, .c {width: 100px}
.a, .b {flex-grow: 1}

.a, .b, .c { width:100px}
.a { flex-grow: 2 }
.b { flex-grow: 1 }

• flexgrow的默认值是0，当我们不设置flexgrow时，这三个元素都是我们设置的值100像素。
• 当我们把a的flexgrow设置为1时，这时候a就变宽了，占满了剩余的空间，b和c还是保持原来的像素。
• 当我们把a和b的flexgrow设置为1时,a和b都变宽了，a和b平分了剩余的空间，c还是100像素
• 当我们把a的flexgrow设置为1，b的flexgrow设置为2时，a占据剩余空间的2/3,b占据剩余空间的1/3
• 注意：
  • flexgrow是表示的是元素占满剩余空间的能力，也就是把所有子元素宽度减去后，再按比例分配宽度。
  • 在这个例子中，总宽度减去300像素，剩余的空间按照2：1分配给a和b。