手写 flex上下两端对齐

实现效果：

html代码：

    <div class="bg">
      <div class="up">
        <span>aaaaaaaaa</span>
      </div>
      <div class="down">
        <div>bbbbb</div>
      </div>      
    </div>

css代码：

      <!-- 
          注意这种实现方式还有个必须条件是要设置flex容器的高度
          flex-wrap: wrap  和 设置子项宽度width：100%就保证了子项占一行，那么align-content属性就会生效，再设置align-content: space-between;
      -->
     .bg{
        width: 200px;
        height: 300px;
        background-color: gray;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
      }
      .up{
        width: 100%;
        background-color: pink;
      }

    .down{
        width: 100%;
        background-color: blue;
        color: #fff;
      }

原作者地址：blog.csdn.net/liubangbo/a…