flex相关知识点

display:flex

• display:flex 使元素生成一个块级的Flex 容器
• display:inline-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;
}
/*container的ABC按照flex排版上下文，而不是块级排版上下文*/
  .a, .b, .c {
    text-align: center;
	padding: 1em;
}
  .a { background: #fcc; }
  .b { background: #cfc; }
  .c { background: #ccf; }
</style>

flex-direction：控制flex内元素的流向

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

代码对应的方向依次是：
默认流向：从左到右
从右到左
从上到下
从下到上
flex-wrap：当子元素较多时，可以让他们换行

flex-direction:row;
flex-wrap:nowrap
/*flex-wrap的默认值是不换行*/
flex-direction:row;
flex-wrap:wrap
/*wrap就是换行，一行放不下时就会换行*/

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

• 可以设置子项的弹性：当容器有剩余空间
  时，会伸展；容器空间不够时，会收缩。
• flex-grow 有剩余空间时的伸展能力
• flex-shrink 容器空间不足时收缩的能力
• flex-basis 没有伸展或收缩时的基础长度
  flex-grow：默认值是0，占满剩余空间的能力，也就是空间的一种比例，把所有子元素的正常宽度减去后，再去按照比例分配。也就是说，当父元素的宽度大于子元素宽度之和并且父元素有剩余时，flex-grow会压缩父元素的空间。

.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 }

flex-shrink：空间不足时收缩的容易程度，默认值是1，默认值就是在收缩。当flex-shrink==0时，不能收缩。

.a, .b, .c { width: 70% }

.a, .b, .c { width:70% }
.a { flex-shrink: 0 }
/*a不能收缩，所以b和c平分了剩下的空间*/
.a, .b, .c { width:70% }
.a, .b { flex-shrink:0 }
/*因为a和b不能收缩，所以就会出现溢出*/

flex-basis：flex基本项的基准宽度，在没有扩展或收缩时的宽度值，如果我们设定了确定的flex-basis，那么就会按照我们确定的值展示。

.a {
  width: 20%;
  flex-basis: 50%;
}

.a {
  width:20%;
}

.a {
  flex-basis:content;
}
/*content：表示内容的宽度*/