flex布局知识点Flex是Fiexible Box的缩写，即“弹性布局”，任何一个容器都可以指定为flex布局。为父

Flex是Fiexible Box的缩写，即“弹性布局”，任何一个容器都可以指定为flex布局。为父元素开启display: flex; 就开启了flex布局，开启了Flex布局以后，子元素的float、clear和vertical-align属性都将失效。

父元素可以设置的flex相关的属性：

flex-direction(决定主轴的方向)：row \ row-reverse \ column \ column-reverse
flex-warp(如果一条轴线排不下的情况下，如何换行)：nowarp \ warp \ warp-reverse
flex-flow(上述两个属性的简写形式) 默认是row nowarp
justify-content(items在主轴上的对齐方式)：flex-start \ flex-end \ center \ space-between \ space-around
align-items(项目在交叉轴上的对齐方式)：flex-start \ flex-end \ center \ baseline(以项目第一行文字的基线进行对齐) \ stretch(默认占满整个容器的高度)
align-content(多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用)：flex-start \ flex-end \ center \ space-between \ space-around \ stretch

子元素可以设置的flex相关的属性：

order(排列顺序，数值越小，排列越靠前)
flex-grow(定义项目的放大比例)：默认是0，如果存在剩余的空间，不会进行放大，如果所有项目的flex-grow属性都是1，那么就会等分剩余的空间，如果有一个是2，其他是1，那么占据的剩余空间比其他item多一倍。
flex-shrink(定义项目的缩小比例)：默认是1，如果空间不足，项目就会缩小，如果一个item的flex-shrink是0，其他是1，那么空间不足的时候，这个item不会进行缩小。
flex-basis：在分配多余空间之前，项目占据主轴的空间，默认值就是item本来的大小。
flex：以上三个属性的简写（flex-grow\flex-shrink\flex-basis），默认是0、1、auto（不放大，自动缩小，原来大小）
- 常见flex取值：
  - flex: 1; 即会自动放大、自动缩小、原来大小。
  - flex: auto; (1 1 auto) 会放大，会缩小，原来大小。
  - flex: none; (0 0 auto) 不放大，不缩小，原来大小。
align-self：定义自己的对齐属性 flex-start \ flex-end \ center \ baseline \ strech \ auto(继承父元素的对齐方式)

flex相关的应用：

实现纵向的上中下排列，充满窗口

  <style>
    html, body{
      margin: 0;
      height: 100%;
    }
    .box{
      flex-direction: column;  // 纵向排列
      display: flex;
      width: 100%;
      height: 100%;
      margin: 0;
      background-color: aquamarine;
    }

    .top{
      height: 20px;
      background-color: rgb(220, 220, 244);
      width: 100%;
    }

    .mid{
      background-color: rgb(245, 213, 213);
      flex: 1; // 自动填充剩余空间
    }

    .bottom{
      width: 100%;
      background-color: rgb(250, 250, 230);
      height: 20px;
    }
  </style>
 
<body>
  <div class="box">
    <div class="top"></div>
    <div class="mid"></div>
    <div class="bottom"></div>
  </div>
</body>

实现垂直居中


  <style>
    .box{
      display: flex;
      align-items: center;  /* 交叉轴垂直居中 */
      justify-content: space-around;
      background-color: aquamarine;
      width: 1000px;
      height: 500px;
    }

    .child{
      width: 200px;
      height:  200px;
      background-color: aqua;
#### }
  </style>

  <div class="box">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

实现三栏布局，中间自适应

  <style>
    .box{
      display: flex;
      align-items: stretch;  /* 交叉轴自动充满 */
      background-color: aquamarine;
      width: 100%;
      height: 500px;
    }

    .left{
      width: 50px;
      border: 1px solid black;
    }

    .right{
      width: 50px;
      border: 1px solid black;
    }

    .mid{
      flex: 1;
      background-color:antiquewhite;
    }
  </style>
  

<body>
  <div class="box">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
  </div>
</body>

实现两栏布局，右侧自适应

  <style>
    .box{
      display: flex;
      align-items: stretch;  /* 交叉轴自动充满 */
      background-color: aquamarine;
      width: 100%;
      height: 500px;
    }

    .left{
      width: 50px;
      border: 1px solid black;
    }

    .right{
      flex: 1;
      background-color:antiquewhite;
    }
  </style>
  
  
<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>